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

Why Grids

Main Benefit

The vast benefit of Grids is in simplifying the setting of the Mobile Views or the Responsive Modes automatically. Your websites must be mobile-friendly.

grid1.jpg

Easy Start

In Nicepage, start with a Block, add the Grid from the Add Menu or press the "Alt+G" keys.

There are over a hundred grids of different types 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 Block already containing a Grid. We will go this way.

Switch Blocks 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 can you 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 Block.

guides.jpg

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

Modifying Grids

Change Grid Layout

Let's pick the Grid with one big cell and four small ones. Please note that you can change the Grid Layout at 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 Block 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 Block 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 Block is now sheet-wide. This state is also called the Boxed Mode.

wide.jpg

Changing the Width

Let's Make the Block Wide. Select a Block.

  1. Enable the Wide property in the Property Panel to the right.
  2. Preview.
  3. Now, disable the Wide property to make the Grid Layout Boxed. All is in just a click.
  4. Preview again.

Duplicate and Remove

Copy and Paste

We will now copy the Grid.

  1. Right-click the Block marker and select the Copy option from the Context Menu.
  2. You can also press the "CTRL + С" hotkeys.
  3. Select the destination Block.
  4. Right-click and select the Paste from the Context Menu or
  5. Press the "CTRL + V" keys to paste.
  6. Align the Grid.

We have two very identical Blocks.

copy.jpg

Delete Grid and Block

Let's delete the lower Grid.

  1. Select the Grid and
  2. Click the "Delete Grid" button in the Property Panel or 3. Press the DELETE key.

Let's also delete the Block.
1. Select the Block.
2. Click the "Delete Block" button in the Property Panel or
3. Press the DELETE key.

delete.jpg

Adjusting Grid Height

Increase the Block Height by pulling the blue bar markers. Increase the Grid Height by dragging the blue dot marker until the Grid is aligned to the Block's middle, snapping to the red guide.

Editing Cells of the Grid

Copying Cells

Now let's edit cells.

  1. Select the bigger cell to the left.
  2. Change the Image Fill to Color Fill in the Property Panel.
  3. Copy this cell by dragging it over another cell holding the CTRL or AlT key.
cell-copy.jpg

Destination Hints

During the copy, you see the hints above the cells, helping to understand what will happen.

Change the color of the smaller cells to light grey.

Swapping Cells

Unlike the copy to swap 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.

Modifying the Cell Content

Background Image

Please 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 the new image location.

Expand the image to make it in the Background. You can do this operation at any time.

add-content.jpg

Adding and Editing 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 As 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 elements placed below, keeping the margins very convenient for editing.

padding.jpg

Changing Paddings

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 beneficial for placing.

add-spacing.jpg

Spacings and Alignments

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 Property Panel to the right.

Mobile Views

Responsive Modes

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

responsive.jpg

Switching Responsive Modes

Let's test this. There are the Device Icons on the Top Bar. Click those icons to switch the Device Views.

Hiding Cells on 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 the other two gray cells. You see that the grey cell is 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 websites consist of sections. The Grid helps to structure the content in a Block. <div class="video-container"><iframe width="885" height="500" src="//www.youtube.com/embed/9B0-LGHADps?rel=0" frameborder="0" allowfullscreen></iframe></div> ## ## Why Grids ### Main Benefit The vast benefit of Grids is in simplifying the setting of the Mobile Views or the Responsive Modes automatically. Your websites must be mobile-friendly. !grid1.jpg! ### Easy Start In Nicepage, start with a Block, add the Grid from the Add Menu or press the "Alt+G" keys. There are over a hundred grids of different types 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 Block already containing a Grid. We will go this way. Switch Blocks 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 can you 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 Block. !guides.jpg! Add Spacing. Let's change the layout. Select the Grid. Click Change Button in the Right Panel. ## Modifying Grids ### Change Grid Layout Let's pick the Grid with one big cell and four small ones. Please note that you can change the Grid Layout at 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 Block 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 Block 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 Block is now sheet-wide. This state is also called the Boxed Mode. !wide.jpg! ### Changing the Width Let's Make the Block Wide. Select a Block. 1. Enable the Wide property in the Property Panel to the right. 2. Preview. 3. Now, disable the Wide property to make the Grid Layout Boxed. All is in just a click. 4. Preview again. ## Duplicate and Remove ### Copy and Paste We will now copy the Grid. 1. Right-click the Block marker and select the Copy option from the Context Menu. 2. You can also press the "CTRL + С" hotkeys. 3. Select the destination Block. 4. Right-click and select the Paste from the Context Menu or 5. Press the "CTRL + V" keys to paste. 6. Align the Grid. We have two very identical Blocks. !copy.jpg! ### Delete Grid and Block Let's delete the lower Grid. 1. Select the Grid and 2. Click the "Delete Grid" button in the Property Panel or 3. Press the DELETE key. Let's also delete the Block. 1. Select the Block. 2. Click the "Delete Block" button in the Property Panel or 3. Press the DELETE key. !delete.jpg! ### Adjusting Grid Height Increase the Block Height by pulling the blue bar markers. Increase the Grid Height by dragging the blue dot marker until the Grid is aligned to the Block's middle, snapping to the red guide. ## Editing Cells of the Grid ### Copying Cells Now let's edit cells. 1. Select the bigger cell to the left. 2. Change the Image Fill to Color Fill in the Property Panel. 3. Copy this cell by dragging it over another cell holding the CTRL or AlT key. !cell-copy.jpg! ### Destination Hints During the copy, you see the hints above the cells, helping to understand what will happen. Change the color of the smaller cells to light grey. ### Swapping Cells Unlike the copy to swap 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. ## Modifying the Cell Content ### Background Image Please 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 the new image location. Expand the image to make it in the Background. You can do this operation at any time. !add-content.jpg! ### Adding and Editing 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 As 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 elements placed below, keeping the margins very convenient for editing. !padding.jpg! ### Changing Paddings 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 beneficial for placing. !add-spacing.jpg! ### Spacings and Alignments 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 Property Panel to the right. ## Mobile Views ### Responsive Modes Change the cell fill to white by selecting the color in the small toolbar above the cell. Change the background image of the first cell. As we stated before, the massive benefit of grids is in making your web Block and pages mobile-friendly automatically. !responsive.jpg! ### Switching Responsive Modes Let's test this. There are the Device Icons on the Top Bar. Click those icons to switch the Device Views. ### Hiding Cells on 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 the other two gray cells. You see that the grey cell is 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) ##