How to Use grid in CSS

CSS grid is a layout system for designing two‑dimensional grid‑based interfaces. Of all the new layout‑type CSS3 properties, grid is the one I use most often (even more so than flex). it is a powerful tool for creating responsive, flexible, and easy‑to‑maintain layouts. In this article, we'll explore how to use CSS Grid and I'll provide a couple of examples of when and how to use it effectively.

Creating a Grid

Creating a grid is very straightforward; you first need to define a container element, to which you then apply the display: grid, making it a grid container. It is from this element that you define the different attributes of your grid; you can define the columns and rows using the grid‑template‑columns and grid‑template‑rows properties. You could also use the grid‑template shorthand property, but we'll focus on long‑hand for simplicity for now.

So. let's say that you want to create a grid with two columns and three rows. Your code might look something like this:

.container {  display: grid;  grid-template-columns: 1fr 1fr;  grid-template-rows: 5rem 10rem 5rem;}

This will create a grid with two equal‑width columns (1fr), and three rows with heights of 5rem, 10rem, and 5rem respectively.

You could also use the repeat() function in these properties so that ‑ for example ‑ if you wanted six columns of equal width, you could write grid‑template‑columns: repeat(6, 1fr) instead of grid‑template‑columns: 1fr 1fr 1fr 1fr 1fr 1fr.

Also worth noting: you don't have to specify rows if you just expect them to repeat as the content allows, following the column layout you've defined.

Placing Items in the Grid

Once you have a grid container and you've defined your columns and rows, each direct child will place themselves into the next available cell.

You can also remove items from this flow and place them into a specific cell (or cells) within the grid using the grid‑column and grid‑row properties. These properties take two values, the start line and the end line.

For example, to place an item in the first column and second row, you would use the following code:

.item {  grid-column: 1 / 2;  grid-row: 2 / 3;}

You can also use the grid‑area property to place an item in multiple rows and columns. This property takes four values, the start column, the end column, the start row, and the end row.

So, for example, to place an item in the first and second columns, on the second and third rows, you would use the following code:

.item {  grid-area: 1 / 2 / 2 / 3;}

Gap and Track Sizing

By default your grid won't have any spacing between each cell; you can achieve this by using the grid‑gap property, which will add space between the grid items on both the horizontal and vertical axes.

For example, if you want to add a gap of 1rem between all the grid items and want to set the width of the first column to 10rem, your code would look something like this:

.container {  display: grid;  grid-template-columns: 10rem 1fr;  grid-template-rows: 5rem 10rem 5rem;  grid-gap: 1rem;}

This will create a grid with two columns, the first column with a width of 10rem and the second one with a width of 1fr (taking up remaining horizontal space). It will also add a 1rem gap between each grid item (each column and each row).

It's worth mentioning briefly here: grid‑gap only applies spacing inside the grid; you would use conventional margin or padding to add spacing around your container.

Flexibility

CSS Grid also provides a lot of flexibility when it comes to creating responsive designs alongside media queries. For example, you could change the number of columns or rows based on the screen size.

.container {  display: grid;  grid-template-columns: 1fr;  grid-template-rows: 5rem 10rem 5rem;}@media (min-width: 600px) {  .container {    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));  }}

As an example, the code above will create a grid that has a single column by default. Above 600px screen width, this then splits into multiple columns that are at least 25rem wide (but will expand to fill the available space: 1fr if the screen size is larger).

Much like with flexbox, you can also align items within your grid using justify‑items, align‑items, justify‑content, and align‑content properties.

For example, you can align all items in the centre of the grid using the following code:

.container {  display: grid;  grid-template-columns: repeat(2, 1fr);  grid-template-rows: 5rem 10rem 5rem;  justify-items: center;  align-items: center;}

The Wrap‑Up

Wrapping up, CSS Grid is a powerful layout tool that allows for the creation of responsive, flexible, and easy‑to‑maintain designs. It provides a lot of flexibility with the ability to create responsive designs using media queries and extends upon the alignment options you may already be familiar with from flexbox.