Nowadays the most of websites consist of sections. The Grid helps to structure the content in a section.

Why do you need a Grid?

Main Benefit. The huge benefit of grids is in simplifying the setting the Mobile Views or the Responsive Modes automatically. It is important that your websites are mobile-friendly.

grid1.jpg

Simple Start. In Nicepage start with a section, add the Grid from the Add Menu or press the "G" key. There are over a hundred of grids of different type and complexity in Nicepage HTML Website Builder. Each Grid Layout also has variations with rotations.

grid-layout.jpg

Blank with the Grid. You can also add a Blank Section already containing a Grid. We will go this way. Switch sections in the Page Navigator to the left. Change the Grid Height pulling the blue resize marker on the Grid’s border.

section-w-grid.jpg

Selecting a Grid. What you can do with the Grid? Click the Grid Marker at the top left corner to select the Grid.

grid-marker.jpg

Drag the Grid up. While moving you see the magnetic guides that help to align. Snap the Grid to the guides and align it to the center of the section.

guides.jpg

Add Spacing. Let’s change the layout. Select the Grid. Click Change Button in the Right Panel.

Modifying the Grid

Change the Grid Layout. Let’s pick the Grid with one big cell and four small ones. Please note that you can change the Grid Layout any time.

Grid Movement. As you already know, you can modify the Grid dimensions. Resize the Grid by clicking and pulling the blue resize markers. Then select the section and adjust the top and the bottom margins. You can shrink the Grid even more horizontally and vertically.

section-center.jpg

Grid Alignment. You can align to the center of the Section or move the Grid around. Let’s snap to the left Sheet Line marked in dashes.

sheet.jpg

Proportional Resize. Now resize the Grid proportionally following the red diagonal guide. Very handy.

proportional.jpg

Boxed and Wide

Snapping the Grid. Finally, snap to the right Sheet Line marked in dashes. The section is now sheet-wide, such state is also called the Boxed Mode.

wide.jpg

Changing the Width. Let’s Make the section Wide. Select the section. Enable the Wide property in the Right Panel. Preview. Now disable the Wide property to make the Grid Layout Boxed. All is in just a click. Preview.

Duplication and Removal

Copy and Paste. We will copy the Grid. Right click the section marker and select the Copy from the Context Menu. You can also press the "CTRL + С" hotkeys. Select the destination section. Right click and select the Paste from the Context Menu or press the "CTRL + V" keys to paste. Align the Grid. We have two very identical sections.

copy.jpg

Delete the Grid and the Section. Let’s delete the lower Grid. Select the Grid and click the "Delete Grid" button in the Right Panel. Let’s also delete the section. Select the section. Click the “Delete Section” button in the Right Panel or press the DELETE key.

delete.jpg

Adjusting the Grid Height. Increase the Section Height by pulling the blue bar markers. Increase the Grid Height by pulling the blue dot marker until the Grid is aligned to the section’s middle snapping to the red guide.

Editing Cells of the Grid

Copying cells. Now let’s edit cells. Select the bigger cell to the left. Change the image fill to color fill in the Right Panel. Copy this cell by dragging it over another cell holding the CTRL key.

cell-copy.jpg

Destination Tips. During the copy you see the tips above the cells helping to understand what will happen. Change the color of the smaller cells to light grey.

Switching cell places. Unlike the copy to switch the cells, select a cell and drag it over another without pressing any keys. Please note the content in the cells is also moved.

cell-resize.jpg

Resizing cells. Resize the cell by pulling the bar markers on the cell borders.

Modyfying the Cell Content

Background Image. Select the bigger cell and change its fill back to an image. Collapse the image background. Resize the image.

collapse.jpg

Move the image around. While moving again you see the tips over containers showing where the image will be located. Expand the image to make it on the background. This operation can be done at any time.

add-content.jpg

Adding and Editing the Content. Add content to the blue cell. Click the small plus at the top right corner of the cell. Add Heading, Text and Button. Edit the Heading text.

Cells like Containers. Note that cells behave the same way as a Container. Please also see the demo on Containers. If you add more text the cell grows down and pushes all the element placed below keeping the margins, which is very convenient for editing.

padding.jpg

Padding Changing. Change the horizontal paddings by clicking and dragging the orange dot markers on the cell top border. You can move freely any content element. Move the Heading around. The tips above the cells, containers, are very helpful for placing.

add-spacing.jpg

Spacing and Alignment. Add spacing between content elements by pulling the orange dot marker at the top of the element block. Auto-align the Cell content horizontally and vertically by clicking the Arrange icons in the Right Panel.

Mobile Views

Responsiveness. Change the cell fill to white selecting the color in the small toolbar above the cell. Change the background image of the first cell. As we stated before the huge benefit of grids is in making your web section and pages mobile-friendly automatically.

responsive.jpg

Switching the Responsive Modes. Let’s test this. There are the Device Icons on the Top Bar. Click those icons to switch the Device Views.

Hiding the Cells for Devices. Let’s hide the grey cells for tablets and phones. To do that, enable the Hide On property in the Right Panel. Then click the Tablet and both Phone icons to hide this cell for those Mobile Views.

hide-on.jpg

Do the same for other two gray cells. You see that the grey cell are now hidden for the Tablet, the Phone Landscape and the Phone Portrait views.

Preview. Click the Preview. Click the Device Icons in the Quick Preview.

With this we are finishing this demo on how to use Grids in Nicepage.

See Also

Get Started With Nicepage

Nowadays the most of websites consist of sections. The Grid helps to structure the content in a section. <div class="video-container"><iframe width="885" height="500" src="//www.youtube.com/embed/9B0-LGHADps?rel=0" frameborder="0" allowfullscreen></iframe></div> ##Why do you need a Grid?## **Main Benefit**. The huge benefit of grids is in simplifying the setting the Mobile Views or the Responsive Modes automatically. It is important that your websites are mobile-friendly. !grid1.jpg! **Simple Start**. In Nicepage start with a section, add the Grid from the Add Menu or press the "G" key. There are over a hundred of grids of different type and complexity in Nicepage [HTML Website Builder](https://nicepage.com/html). Each Grid Layout also has variations with rotations. !grid-layout.jpg! **Blank with the Grid**. You can also add a Blank Section already containing a Grid. We will go this way. Switch sections in the Page Navigator to the left. Change the Grid Height pulling the blue resize marker on the Grid’s border. !section-w-grid.jpg! **Selecting a Grid**. What you can do with the Grid? Click the Grid Marker at the top left corner to select the Grid. !grid-marker.jpg! Drag the Grid up. While moving you see the magnetic guides that help to align. Snap the Grid to the guides and align it to the center of the section. !guides.jpg! Add Spacing. Let’s change the layout. Select the Grid. Click Change Button in the Right Panel. ##Modifying the Grid## **Change the Grid Layout**. Let’s pick the Grid with one big cell and four small ones. Please note that you can change the Grid Layout any time. **Grid Movement**. As you already know, you can modify the Grid dimensions. Resize the Grid by clicking and pulling the blue resize markers. Then select the section and adjust the top and the bottom margins. You can shrink the Grid even more horizontally and vertically. !section-center.jpg! **Grid Alignment**. You can align to the center of the Section or move the Grid around. Let’s snap to the left Sheet Line marked in dashes. !sheet.jpg! **Proportional Resize**. Now resize the Grid proportionally following the red diagonal guide. Very handy. !proportional.jpg! ##Boxed and Wide## **Snapping the Grid**. Finally, snap to the right Sheet Line marked in dashes. The section is now sheet-wide, such state is also called the Boxed Mode. !wide.jpg! **Changing the Width**. Let’s Make the section Wide. Select the section. Enable the Wide property in the Right Panel. Preview. Now disable the Wide property to make the Grid Layout Boxed. All is in just a click. Preview. ##Duplication and Removal## **Copy and Paste**. We will copy the Grid. Right click the section marker and select the Copy from the Context Menu. You can also press the "CTRL + С" hotkeys. Select the destination section. Right click and select the Paste from the Context Menu or press the "CTRL + V" keys to paste. Align the Grid. We have two very identical sections. !copy.jpg! **Delete the Grid and the Section**. Let’s delete the lower Grid. Select the Grid and click the "Delete Grid" button in the Right Panel. Let’s also delete the section. Select the section. Click the “Delete Section” button in the Right Panel or press the DELETE key. !delete.jpg! **Adjusting the Grid Height**. Increase the Section Height by pulling the blue bar markers. Increase the Grid Height by pulling the blue dot marker until the Grid is aligned to the section’s middle snapping to the red guide. ##Editing Cells of the Grid## **Copying cells**. Now let’s edit cells. Select the bigger cell to the left. Change the image fill to color fill in the Right Panel. Copy this cell by dragging it over another cell holding the CTRL key. !cell-copy.jpg! **Destination Tips**. During the copy you see the tips above the cells helping to understand what will happen. Change the color of the smaller cells to light grey. **Switching cell places**. Unlike the copy to switch the cells, select a cell and drag it over another without pressing any keys. Please note the content in the cells is also moved. !cell-resize.jpg! **Resizing cells**. Resize the cell by pulling the bar markers on the cell borders. ##Modyfying the Cell Content## **Background Image**. Select the bigger cell and change its fill back to an image. Collapse the image background. Resize the image. !collapse.jpg! Move the image around. While moving again you see the tips over containers showing where the image will be located. Expand the image to make it on the background. This operation can be done at any time. !add-content.jpg! **Adding and Editing the Content**. Add content to the blue cell. Click the small plus at the top right corner of the cell. Add Heading, Text and Button. Edit the Heading text. **Cells like Containers**. Note that cells behave the same way as a Container. Please also see the demo on Containers. If you add more text the cell grows down and pushes all the element placed below keeping the margins, which is very convenient for editing. !padding.jpg! **Padding Changing**. Change the horizontal paddings by clicking and dragging the orange dot markers on the cell top border. You can move freely any content element. Move the Heading around. The tips above the cells, containers, are very helpful for placing. !add-spacing.jpg! **Spacing and Alignment**. Add spacing between content elements by pulling the orange dot marker at the top of the element block. Auto-align the Cell content horizontally and vertically by clicking the Arrange icons in the Right Panel. ##Mobile Views## **Responsiveness**. Change the cell fill to white selecting the color in the small toolbar above the cell. Change the background image of the first cell. As we stated before the huge benefit of grids is in making your web section and pages mobile-friendly automatically. !responsive.jpg! **Switching the Responsive Modes**. Let’s test this. There are the Device Icons on the Top Bar. Click those icons to switch the Device Views. **Hiding the Cells for Devices**. Let’s hide the grey cells for tablets and phones. To do that, enable the Hide On property in the Right Panel. Then click the Tablet and both Phone icons to hide this cell for those Mobile Views. !hide-on.jpg! Do the same for other two gray cells. You see that the grey cell are now hidden for the Tablet, the Phone Landscape and the Phone Portrait views. **Preview**. Click the Preview. Click the Device Icons in the Quick Preview. With this we are finishing this demo on how to use Grids in Nicepage. ##See Also - [Responsive Design with Nicepage](page:5249) - [Nicepage Builders](page:2364) - [Nicepage Menu](page:9801) - [Nicepage Container](page:13180) - [Nicepage Blocks](page:18664) - [Nicepage on YouTube](https://www.youtube.com/playlist?list=PLrT1zCpaZbn5Td7n67dcjue4nba8VD9hh) - [Nicepage Video Tutorials](page:1318) ## Get Started With Nicepage - [HTML Website Builder](https://nicepage.com/html)