Laying out a simple page: creating a grid

OK, we have explored the material thoroughly enough using parks and recreation areas. Now it’s time to get back to web interface design. After all, isn’t this why you are taking the course?

In the next series of assignments, we will analyze how we can use grids to make a two page grid for a typical online store, where the two pages are a main page and a product catalog.

After that, you will take a test in which you will create your own design for an interface section.

So, let’s start with the main page of a gardening product store. We have an .index-grid container with a set of blocks: a header with a navigation menu, a promo block with an image, a block with articles, a list of reviews, and a footer.

Currently styles have been applied to them, but they are not arranged on a grid. The elements simply flow one after another from top to bottom. Our task is to fix this and to create the following type of grid:

In the layout depicted in the diagram, the red areas show how the grid columns will flow. The sidebar will be one column width, and the main contents of the page will take up two columns. For the sake of consistency, all three columns will be the same width.

Let’s start writing the code: we will make the layout of our page a grid, add the spacing between rows and columns, and then assign the grid three columns.