CSS Grid: A designer guide to change the layout on the web
Grids are the good and most powerful tool when developing a layout in order to organize pages. Moreover, it helps you to easily build complex web designs. Isn’t it? As more and more web designers are looking to employ grids on their websites, in this article you will expand your knowledge and skills on how to implement CSS Grid, How it changes your website layout.
Anatomy of a Grid
Grids help the front end developers for the placement of elements in a design, where each grid performing a specific function. Additionally, designers find solutions to visual and organizational problems.
CSS Grid is a 2-dimensional system, means it can handle both columns and rows, that helps you easily build complex web designs and open the doors for many more options in designing a layout.
The interesting part is that you can customize the grids according to the requirement of your project that means you don’t need to start with 12 columns — you can have five or eight.
Let’s get start…
The language of CSS Grid is very easy to learn and there’s no need to learn cryptic class names. All you need to do is set up a page using a CSS Grid in two steps i.e. define the container and then place elements in those areas.
# First Step: Defining the container
In order to define the grid container element use display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, followed by child elements into the grid with grid-column and grid-row.
Now we have a grid container on the page, let’s start sorting the grid up into columns. Here you should use grid-template-columns, and to define the gaps between columns grid-column-gap.
Example: For display: grid;. This property makes a block-level grid container.
grid-template-columns: auto auto;
border: 1px solid #fff;
If you want to change the column dimensions, use:
grid-template-columns: 100px 500px;
# Second Step: Placing the items
The next thing you’ll need to learn is placing the elements on the grid use; let’s start with creating the 3×3 grid, using the below markup.
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
This will result in the following layout:
Well, you might be thinking why we create the 3×3 grid, as we only see a 3×2 grid on the page. That’s because we only have six items to fill the grid with. If we had three more, then the lowest row would be filled as well.
Now, If you want to position and resize the items then use the grid-column and grid-row properties: