CSS Grid Golf
Tags: css, grid
Published: 2021-11-22 03:52:41

---
title: CSS Grid Golf
published: true
description: CSS Grid requires very little definition to produce a simple layout. Probably even less than you thought.
tags: CSS, grid
cover_image: https://horuskol.net/assets/images/posts/20211014-css-grid/grid.png
canonical_url: https://www.horuskol.net/blog/2021-10-14/css-grid-golf/
---

I've been playing with CSS Grid quite a bit - trying to see exactly what it can and can't do. One thing I decided to have a go at is what minimum amount of code is required to create a valid grid layout.

## A simple two column layout

```css
.container {
  display: grid;
  grid: '. .';
}
```

![Two empty grid cells of equal width placed side by side.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2nbvvv2vpewc5piqozk.png)

This CSS rule will create a grid containing two columns. If the container has more than two child elements, then it will automatically generate new rows as required:

```html
<div class="container">
    <div>This is the first element.</div>
    
    <div>Here we have another element.</div>
    
    <div>This element should now be shown on the next row.</div>
</div>
```

![Three grid cells with content across two rows. The left hand column is wider than the right hand one to fit its content.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulfr10cftze13gqfd923.png)

As you can see in the above example, the columns may adjust to fit the content as best they can. If you want more control of the column widths, you can define them in the same `grid` property. For example, if you want the two columns to always be equal, regardless of content, you can set the first column to be 50%. The second column will the fill the other 50% and no more:

```css
.container {
  display: grid;
  grid: '. .' / 50%;
}
```

![Two grid cells of equal width. The content in the right hand grid cell wraps to fit the constricted space.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7j8i58f4o9a4pzig8icv.png)

You can specify the width of the first column as a percentage or a fixed value, and the second column will automatically take up the extra space:

```css
.container {
  display: grid;
  grid: '. .' / 200px;
}
```

![Two grid cells side by side. The left cell is 200 pixels wide while the right hand cell fills the remaining space.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jz37af1o7zgax61b8v6r.png)

Alternatively, you can specify both the column widths explicitly:

```css
.container {
  display: grid;
  grid: '. .' / 200px 50%;
}
```

![The left cell is 200 pixels wide while the right cell is half the width of the container. The remaining space is unoccupied.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3s51pudiea0b6xzcvz2t.png)

## Three columns (or more)

You can define as many columns as you like. If you don't specify any column widths, then they will default to being equal, but with the ability to grow depending on content:

```css
.container {
  display: grid;
  grid: '. . .';
}
```

![Three empty grid cells of equal width placed side by side.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8ocdnglg98iwwkruy8a.png)

![Three grid cells with content. The left cell has grown to allow its content to fit while the other two cells have shrunk.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vj510m1p8zt9q1f61uw.png)

If you set a width for the first column, then the remaining two columns will divide the remaining space between themselves:

```css
.container {
  display: grid;
  grid: '. . .' / 50px;
}
```

![Three empty grid cells. The left most cell is 50 pixels wide while the other two cells share the remaining space evenly.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktqsfelp7q09li4adymv.png)

You can set the column width for any number of columns from left to right, with the remaining columns sharing the remaining space:

```css
.container {
  display: grid;
  grid: '. . . . .' / 25px 75px 25px;
}
```

![Five empty grid cells in one row. The first three cells are of various fixed widths while the other two cells share the remaining space evenly.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgybad9dv4ii97zrz8h5.png)

## Controlling grid rows

This is where things start to get messy. The `grid` property is a shorthand for several other properties. So far we've used the property to specify `grid-template-areas` and `grid-template-columns` in the examples above.

Using the `grid` rule, we can also take control of the height of grid rows. Take this single column - the first row will 

```css
.container {
  display: grid;
  grid: '.' 10rem;
}
```

![Three rows with content. The first row is a fixed height while the remaining rows adjust to fit their content.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j492cblgqtccbo1vpky7.png)

To control the heights of multiple rows:

```css
.container {
  display: grid;
  grid: '.' 10rem
        '.' 5rem;
}
```

![Three rows with content. The first and second row have different fixed heights while the last row fits its content.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgt4f3fzfoumo078aedl.png)

### Rows and columns

```css
.container {
  display: grid;
  grid: '. .' 5rem
        '. .' 5rem;
}
```

![Five grid cells arranged into multiple rows. The first two rows have a fixed height while the third shrinks to fit its content.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rn4jekkn22bahfurmq0q.png)

Every row must have the same number of columns:

```css
.container {
  display: grid;
  grid: '. .' 5rem
        '. . .' 5rem;
}
```

![Five empty cells arranged into five rows which shrink or grow to fit their content.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdq4h1xp7j7yuqt6lrg7.png)

If you want to control column widths:

```css
.container {
  display: grid;
  grid: '. .' 5rem
        '. .' 
        / 200px;
}
```

![Four grid cells arranged into a grid with two columns and two rows.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5r5uatqaainjm9ek9emw.png)

See what I mean about getting a bit messy - and we've only done about half the things that the `grid` property itself can use.

## Be explicit

While the `grid` shorthand is nice for fairly trivial layouts, it is a fairly powerful shorthand, which means it can quickly get quite complex when trying to add in lots of rules. In fact, we've only covered about half of the properties that `grid` can handle.

While coding golf experiments can be fun and instructive, I prefer to be more explicit/expressive with actual code. Anything beyond the simple column definitions like above, and I would rather avoid using the shorthand property.

```css
.container {
  display: grid;
  grid-template-areas: '. .'
                       '. .';
  grid-template-columns: 200px 1fr;
  grid-template-rows: 5rem 
                      min-content;
}
```

![Four grid cells arranged into a grid with two columns and two rows.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5r5uatqaainjm9ek9emw.png)