How to use the Grid for the Responsive Web Design

Visit https://nicepage.com
More articles at https://nicepage.com/doc/article/1318/video-tutorials

Subscribe to find more information:
https://youtube.com/nicepage
https://pinterest.com/nicepagecom
https://facebook.com/nicepageapp

Why do you need a Grid? Nowadays the most of websites consist of sections. The Grid helps to structure the content in a section. 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.

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. Each Grid Layout also has variations with rotations. 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.

Click the Grid Marker at the top left corner to select the Grid. 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.

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

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

What you can do with the Grid? 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. 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.

Now resize the Grid proportionally following the red diagonal guide. Very handy. Finally, snap to the right Sheet Line marked in dashes. The section is now sheet-wide, such state is also called the Boxed Mode.

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.

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. 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.

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.

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.

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.

Resize the cell by pulling the bar markers on the cell borders. Select the bigger cell and change its fill back to an image. Collapse the image background. Resize the image.

Move the image around. 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. 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.

Change the horizontal padding 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 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.

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. Let’s test this. There are the Device Icons on the Top Bar. Click those icons to switch the Device Views.

Let’s hide the grey cells for tablets and phones. To do that, enable the Hide On property in the Right Panel.

You see that the grey cell are now hidden for the Tablet, the Phone Landscape and the Phone Portrait views. 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.

source