How to Use grid in CSS

I reach for CSS Grid when the layout needs rows and columns to work together. It lets the container describe that two‑dimensional relationship directly, instead of making widths, margins, or nested wrappers impersonate a grid. For a single row or column, flex is often the simpler tool.

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 by all four grid lines. Its values are row‑start, column‑start, row‑end, and column‑end, in that order.

For example, the following places an item in the first row and second column:

.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));
  }
}

The code starts with one column. At a viewport width of at least 600px, auto-fit allows as many tracks with a minimum width of 25rem as will fit the grid container, then collapses any empty tracks. The 1fr maximum shares the remaining space between the occupied tracks. Crossing the breakpoint does not guarantee two columns: the container still needs room for them, and a container narrower than 25rem can overflow this minimum.

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

Use Grid when both axes matter and let the container describe the tracks, gaps, and placement. Use Flexbox when the problem is principally one‑dimensional. A responsive grid is usually clearest when its constraints live in the track definition rather than in a long sequence of breakpoint overrides.