CSS Grid - child properties

Go back to HTML and CSS Index

We've now seen how to create a flexible grid using the CSS Grid module where the grid elements show up in the same order as listed. We've also seen how we can mix things up a bit by working with the different grid areas. Today, we will look at more ways to mix things up when using the CSS Grid.

grid-column-start

The grid-column-start property is used to specify a grid item's start position within the columns:

The CSS

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, 50px);
}
.griditem:nth-of-type(1) {
grid-column-start: 2;
}
12.00 | Moving the starting point of an item in the grid

Example

1
2
3
4

In the example 12.00 above, the first grid item is set to start at line number 2 in the grid. Since nothing else has been specified for the other grid items, they will keep their original order, meaning that everything is just pushed to the next grid area.

If we do decide to specify where the other grid items are to start, it might look something like this:

The CSS

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, 50px);
}
.griditem:nth-of-type(1) {
grid-column-start: 2;
}
.griditem:nth-of-type(2) {
grid-column-start: 1;
}
.griditem:nth-of-type(3) {
grid-column-start: 3;
}
.griditem:nth-of-type(4) {
grid-column-start: 1;
}
12.01 | Placing items differently within a grid

Example

1
2
3
4

In this example, we are not changing the order of the different grid items either, but we are changing the starting point for each grid item creating more white space.

grid-row-start

We can also specify the line number that we want our grid item to start in row-wise using the grid-row-start property:

The CSS

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, 50px);
}
.griditem:nth-of-type(1) {
grid-row-start: 3;
}
12.02 | Setting the first grid item to start on line 3 in the row

Example

1
2
3
4

As you can see from the example, changing the starting point row-wise for a grid item may actually change the order in which the different grid items are displayed.

Again, we may specify the starting row for each grid item:

The CSS

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3,50px);
}
.griditem:nth-of-type(1) {
grid-row-start: 2;
}
.griditem:nth-of-type(2) {
grid-row-start: 1;
}
.griditem:nth-of-type(3) {
grid-row-start: 3;
}
.griditem:nth-of-type(4) {
grid-row-start: 2;
}
12.03 | Placing elements differently in a grid

Example

1
2
3
4

As you can tell from example 12.03, we mix up the order in some ways, but still the item that have the same starting point row-wise will appear in their original order, which is why 1 comes before 4 in the grid.

grid-column-start and grid-row-start combo

Using a combo of the grid-column-start and grid-row-start properties, we can really change our layout:

The CSS

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3,50px);
}
.griditem:nth-of-type(1) {
grid-row-start: 1;
grid-column-start: 1;
}
.griditem:nth-of-type(2) {
grid-row-start: 1;
grid-column-start: 3;
}
.griditem:nth-of-type(3) {
grid-row-start: 3;
grid-column-start: 1;
}
.griditem:nth-of-type(4) {
grid-row-start: 3;
grid-column-start: 3;
}
12.04 | Placing items differently in a grid

Example

1
2
3
4

In this example, we are moving the items out in the corners using a combo of grid-column-start and grid-row-start.

Assignment - Tic Tac Toe static display

  • Use the CSS Grid to create a static Tic Tac Toe display where X has won.
  • You may use icons from eg. Font Awesome for the visual aspect (eg. the icons times and circle or you can just insert X's and O's.
  • You may only place 3 X's and 2 O's. They need to be placed in this order: X 0 X 0 X. You are not allowed to place empty elements in between.

NB: Start with the placement of the items, then - if you have the time - add to the visuals.

grid-column-end

The grid-column-end property is used to specify where a grid item is to end column-wise.

The CSS

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, 50px);
}
.griditem:nth-of-type(1) {
grid-column-start: 1;
grid-column-end: 3;
}
12.05 | Changing the size of a grid item

Example

1
2
3
4

In the example 12.05 above, we change the size of the first grid item by making it span from the first line column-wise to the third.

The other grid items stick to the original order and have their own grid area.

grid-row-end

The same thing can be done row-wise using the grid-row-end property:

The CSS

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, 50px);
}
.griditem:nth-of-type(1) {
grid-row-start: 1;
grid-row-end: 4;
}
12.05 |

Example

1
2
3
4

The first grid item is set to span from line 1 to 4 row-wise, making it larger than the other grid items.

grid-area

Instead of typing in the different start and end points of each grid item on 4 different lines, you can use the grid-area property to specify all of them at once:

Syntax

.griditem {
grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end;
}
12.06 | Reducing 4 lines of code to just 1

Let's have a look at an example:

The CSS

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, 50px);
}
.griditem:nth-of-type(1) {
grid-area: 1/1/4/4;
}
.griditem:nth-of-type(2) {
grid-area: 1/3/2/4;
}
.griditem:nth-of-type(3) {
grid-area: 2/2/3/3;
}
.griditem:nth-of-type(4) {
grid-area: 3/1/4/2;
}
12.07 | Changing the size and placement of the different grid items

Example

1
2
3
4

In this example, we create a grid with 3 columns and 3 rows.

The first grid item is told to span from line 1-4 row-wise, and from 1-4 column-wise, meaning that it will fill in the whole grid.

The second grid item is told to span from line 1-2 row-wise, and from 3-4 column-wise, placing it in the upper right corner of our grid.

The third grid item is told to span from line 2/3 row- and column-wise, placing it in the middle of our grid.

The fourth grid item is told to span from line 3/4 row-wise, and from 1/2 column-wise, meaning that is will be placed in the lower left corner of our grid.

Assignment - Hero image layout

Previously, you have tried to place elements on top of other elements using the position property. This time around, try using the CSS Grid module instead to solve the following assignment:

CSS Grid assignment image ´
  • Recreate the layout using the CSS Grid module.

NB: The visual elements used in the example are available on Canvas - if you are a student in my class, of course.