Grid Layout

Syntax

Grid line: the grid line is the border of each cell, the first grid line is the left border of the first column, same applied to rows.

Grid Container

1
2
3
display: grid;
grid-template-columns: repeat(3, 100px) ;
grid-template-rows: repeat(2, 200px);

This creates a grid with 3 columns and 2 rows, each column is 100px wide and each row is 200px high. However, instead of using repeat(), we can also define the size manually.

1
2
grid-template-columns: 100px, 100px, 100px ;
grid-template-rows: 200px, 200px;

This has the same effect as the repeat().

We can also define the GAP between each box:

1
gap: 10px, 20px;

This sets the horizontal gap at 10px, while the vertical gap at 20px.

Grid item

Some item will only take up one cell, but some may take up multiple rows or columns. In the grid item style, we can define how many rows and columns the item will occupy.

Define using grid lines

1
2
3
4
5
grid-column-start: 1;
grid-column-end: 2;

grid-row-start: 1;
grid-row-end: 2;

This item will cover the space between the first grid line to the second vertically and horizontally, which makes it a square formed by one cell.

But this seems to be too much work, so we can usually use the shorthand property:

1
2
grid-column: 1 / 2;
grid-row: 1 / 2;

This is the same as the previous one.

ALSO, we can use the negative index:

1
grid-column: 1 / -1;

-1 means the last grid line, which is the right border of the columns or rows.

This means the item will cover the space starting from the first grid line to the last, which is all columns.

Define using span:

Sometimes we don’t care about the border or grid lines, we only care how many columns/rows the item spans.

1
grid-column: 1 / span 2;

This means the item will cover 2 columns spanning from the second grid line, it has the same effect as:

1
grid-column: 1 / 3;

If we only use the span, the item will be placed automatically after the last item and take up the space:

1
grid-column: span 2;

This item will cover 2 columns starting from the last item horizontally. Doing so makes the item more flexible, as it only cares about its size instead of its position.

THE fr Unit

The size of each cell can use different units:

  • Fixed units: px em rem
  • Relative units: % vw vh
  • Auto: auto The cell will take up enough space to put the contents
  • fr

The fr is a very useful unit, since it devides the space of each row/column and distribute the space according to its value.

If I want three columns of the same size, and the three columns takes up the max width, we can use:

1
grid-template-columns: repeat(3, 33.3%);

but this is not a good idea, since sometimes we may have gap:

1
2
grid-template-columns: repeat(3, 1fr);
gap: 10px 0;

using fr can help us solve the problem.

Naming the grid line

When deciding how large the grid item should be, we need to use grid line. But when a container has too many grid lines, this may be confusing. Therefore, we can name specific grid lines to help us with the layout.

1
2
3
4
.container {
    display: grid;
    grid-template-columns: [first] 1fr [second] 1fr [third] 1fr [last];
}

Doing so with [], we created a grid with one row, and three columns, between each column we have the named grid lines we can use in grid items:

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

This grid item will take up three columns starting from the first grid line to the last.

Alignment

If the grid is smaller than the container, we can set the alignment of the grid in the container.

1
2
3
4
5
6
7
8
9
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
}

The four properties are:

  • justify-content: defines the horizontal position of the grid inside the container.
  • align-content: defines the vertical position of the grid inside the container.
  • justify-items: defines the horizontal position of the grid item inside its grid cell.
  • align-items: defines the vertical position of the grid item inside its grid cell.

The first two properties(about the position of the grid) can have different values:

  • start
  • end
  • center
  • space-evenly
  • space-between
  • space-around

The value of the last two(about the position of grid items) can be:

  • start
  • end
  • center
  • stretch: the default, the grid item will stretch to fill the cells.

The align-items and the justify-content works for all grid items, but if one item needs to be different, we can use:

1
2
3
4
.item{
 align-self: center;
 justify-self: center;
}

Responsive design using grid

minmax()

Using this we can set the minimum and maximum length/height of a column/row.

1
2
3
4
.container {
    display: grid;
    grid-template-columns: minmax(200px, 1fr)  500px  minmax(200px, 1fr);
}

This way, the center column will always be 500px, while the other two will be at least 200px wide, but will take up 1fr space if available.

Using minmax() we can make sure the grid is not too stretched or too oppressed, which makes the site more responsive and readable.

auto-fill and auto-fit

When using repeat(), the first parameter is the number of columns/rows we want. However, in responsive design, the number of rows/columns may vary according to the size of the screen.
That’s why we need auto-fill and auto-fit.

The main idea is to fill in as much columns/rows as possible. But there are some slight difference:

  • auto-fill: Fill the row with as many columns as possible, even if they’re empty.
  • auto-fit: Fit the columns to the content; collapse empty ones.

For example:

1
2
3
4
5
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

Using auto-fill, the result looks like:

1
| item | item | item | [empty] | [empty] |

On the other hand, using auto-fit:

1
2
3
4
5
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
1
| item | item | item | (fills the entire row evenly) |