Basic Concepts of grid layout

CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or
small user interface elements.

What is a grid?
A grid is a set of intersecting horizontal and vertical lines defining columns and rows. Elements can be placed onto the
grid within these column and row lines. CSS grid layout has the following features:

Fixed and flexible track sizes

You can create a grid with fixed track sizes – using pixels for example. This sets the grid to the specified pixel which fits
to the layout you desire. You can also create a grid using flexible sizes with percentages or with the new fr unit designed
for this purpose.

Item placement
You can place items into a precise location on the grid using line numbers, names or by targeting an area of the grid. Grid
also contains an algorithm to control the placement of items not given an explicit position on the grid.

Creation of additional tracks to hold content

You can define an explicit grid with grid layout. The Grid Layout specification is flexible enough to add additional rows
and columns when needed. Features such as adding "as many columns that will fit into a container" are included.

Alignment control
Grid contains alignment features so we can control how the items align once placed into a grid area, and how the entire
grid is aligned.

Control of overlapping content

More than one item can be placed into a grid cell or area and they can partially overlap each other. This layering may then
be controlled with the z-index property.

Grid is a powerful specification that, when combined with other parts of CSS such as flexbox, can help you create layouts
that were previously impossible to build in CSS. It all starts by creating a grid in your grid container.

The Grid container

We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this,
all direct children of that element become grid items.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

.wrapper {
display: grid;
}

All the direct children are now grid items

Grid tracks
We define rows and columns on our grid with the grid-template-rows and grid-template-columns properties. These define
grid tracks. A grid track is the space between any two lines on the grid. In the below image you can see a track
highlighted – this is the first row track in our grid.

Page 1 of 15
Basic example

I can add to our earlier example by adding the grid-template-columns property, then defining the size of the column
tracks.

I have now created a grid with three 200-pixel-wide column tracks. The child items will be laid out on this grid one in
each grid cell.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
}

The fr unit

Tracks can be defined using any length unit. Grid also introduces an additional length unit to help us create flexible grid
tracks. The new fr unit represents a fraction of the available space in the grid container. The next grid definition would
create three equal width tracks that grow and shrink according to the available space.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

Unequal sizes

In this next example, we create a definition with a 2fr track then two 1fr tracks. The available space is split into four. Two
parts are given to the first track and one part each to the next two tracks.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}

Mixing flexible and absolute sizes

In this final example, we mix absolute sized tracks with fr units. The first track is 500 pixels, so the fixed width is taken
away from the available space. The remaining space is divided into three and assigned in proportion to the two flexible
tracks.

Page 2 of 15
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: 500px 1fr 2fr;
}

Track listings with repeat() notation

Large grids with many tracks can use the repeat() notation, to repeat all or a section of the track listing. For example the
grid definition:

.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

Can also be written as:

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

Repeat notation can be used for a part of the track listing. In this next example I have created a grid with an initial 20-
pixel track, then a repeating section of 6 1fr tracks then a final 20-pixel track.

.wrapper {
display: grid;
grid-template-columns: 20px repeat(6, 1fr) 20px;
}

Repeat notation takes the track listing, and uses it to create a repeating pattern of tracks. In this next example, my grid will
consist of 10 tracks, a 1fr track, and then followed by a 2fr track. This pattern will be repeated five times.

.wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr 2fr);
}

The implicit and explicit grid

When creating our example grid we specifically defined our column tracks with the grid-template-columns property, but
the grid also created rows on its own. These rows are part of the implicit grid. Whereas the explicit grid consists of any
rows and columns defined with grid-template-columns or grid-template-rows.

If you place something outside of the defined grid—or due to the amount of content, more grid tracks are needed—then
the grid creates rows and columns in the implicit grid. These tracks will be auto-sized by default, resulting in their size
being based on the content that is inside them.

You can also define a set size for tracks created in the implicit grid with the grid-auto-rows and grid-auto-
columns properties.

In the below example we use grid-auto-rows to ensure that tracks created in the implicit grid are 200 pixels tall.

<div class="wrapper">
<div>One</div>
<div>Two</div>
Page 3 of 15
 <div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}

Track sizing and minmax

When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give
tracks a minimum size, but also ensure they expand to fit any content that is added. For example, I may want my rows to
never collapse smaller than 100 pixels, but if my content stretches to 300 pixels in height, then I would like the row to
stretch to that height.

Grid has a solution for this with the minmax() function. In this next example I am using minmax() in the value of grid-
auto-rows. This means automatically created rows will be a minimum of 100 pixels tall, and a maximum of auto.
Using auto means that the size will look at the content size and will stretch to give space for the tallest item in a cell, in
this row.

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}

<div class="wrapper">
<div>One</div>
<div>Two
<p>I have some more content in.</p>
<p>This makes me taller than 100 pixels.</p>
</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

Grid lines

It should be noted that when we define a grid we define the grid tracks, not the lines. Grid then gives us numbered lines to
use when positioning items. In our three column, two row grid we have four column lines.

Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand
side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Lines can also be named, and we will
look at how to do this in a later guide in this series.

Positioning items against lines

Page 4 of 15
We will be exploring line based placement in full detail in a later article. The following example demonstrates doing this
in a simple way. When placing an item, we target the line – rather than the track.

In the following example I am placing the first two items on our three column track grid, using the grid-column-
start, grid-column-end, grid-row-start and grid-row-end properties. Working from left to right, the first item is placed
against column line 1, and spans to column line 4, which in our case is the far-right line on the grid. It begins at row line 1
and ends at row line 3, therefore spanning two row tracks.

The second item starts on grid column line 1, and spans one track. This is the default so I do not need to specify the end
line. It also spans two row tracks from row line 3 to row line 5. The other items will place themselves into empty spaces
on the grid.

<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}

.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}

.box2 {
grid-column-start: 1;
grid-row-start: 3;
grid-row-end: 5;
}

Note: Don't forget that you can use the Grid Inspector in Firefox Developer Tools to see how the items are positioned
against the lines of the grid.

Line-positioning shorthands

The longhand values used above can be compressed onto one line for columns with grid-column, and one line for rows
with grid-row. The following example would give the same positioning as in the previous code, but with far less CSS. The
value before the forward slash character (/) is the start line, the value after the end line.

You can omit the end value if the area only spans one track.

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}

.box1 {
grid-column: 1 / 4;
grid-row: 1 / 3;
}

.box2 {
grid-column: 1;
grid-row: 3 / 5;
Page 5 of 15
}

Grid cells

A grid cell is the smallest unit on a grid. Conceptually it is like a table cell. As we saw in our earlier examples, once a grid
is defined as a parent the child items will lay themselves out in one cell each of the defined grid. In the below image, I
have highlighted the first cell of the grid.

Grid areas

Items can span one or more cells both by row or by column, and this creates a grid area. Grid areas must be rectangular –
it isn't possible to create an L-shaped area for example. The highlighted grid area spans two row and two column tracks.

Gutters

Gutters or alleys between grid cells can be created using the column-gap and row-gap properties, or the shorthand gap. In
the below example, I am creating a 10-pixel gap between columns and a 1em gap between rows.

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 1em;
}

Note: When grid first shipped in browsers the column-gap, row-gap and gap were prefixed with the grid- prefix as grid-
column-gap, grid-row-gap and grid-gap respectively.

Browsers all now support unprefixed values, however the prefixed versions will be maintained as aliases making them
safe to use.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

Any space used by gaps will be accounted for before space is assigned to the flexible length fr tracks, and gaps act for
sizing purposes like a regular grid track, however you cannot place anything into a gap. In terms of line-based positioning,
the gap acts like a thick line.

Nesting grids

Page 6 of 15
A grid item can become a grid container. In the following example, I have the three-column grid that I created earlier,
with our two positioned items. In this case the first item has some sub-items. As these items are not direct children of the
grid they do not participate in grid layout and so display in a normal document flow.

Nesting without subgrid

If I set box1 to display: grid I can give it a track definition and it too will become a grid. The items then lay out on this
new grid.

.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
display: grid;
grid-template-columns: repeat(3, 1fr);
}

* {box-sizing: border-box;}

.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.box {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}

.box1 {
grid-column: 1 / 4;
}

.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}

In this case the nested grid has no relationship to the parent. As you can see in the example it has not inherited the gap of
the parent and the lines in the nested grid do not align to the lines in the parent grid.

Subgrid

In the working draft of the Level 2 Grid specification there is a feature called subgrid, which would let us create nested
grids that use the track definition of the parent grid.
Page 7 of 15
Note: This feature shipped in Firefox 71, which is currently the only browser to implement subgrid.

In the current specification, we would edit the above nested grid example to change the track definition of grid-template-
columns: repeat(3, 1fr), to grid-template-columns: subgrid. The nested grid will then use the parent grid tracks to layout
items.

.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
display: grid;
grid-template-columns: subgrid;
}

Layering items with z-index

Grid items can occupy the same cell, and in this case we can use the z-index property to control the order in which
overlapping items stack.

Overlapping without z-index

If we return to our example with items positioned by line number, we can change this to make two items overlap.

<div class="wrapper">
<div class="box box1">One</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}

.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}

.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 4;
}

The item box2 is now overlapping box1, it displays on top as it comes later in the source order.

Controlling the order

We can control the order in which items stack up by using the z-index property - just like positioned items. If we
give box2 a lower z-index than box1 it will display below box1 in the stack.

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}

.box1 {
Page 8 of 15
 grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
z-index: 2;
}

.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 4;
z-index: 1;
}

Relationship of grid layout to other layout methods

CSS Grid Layout has been designed to work alongside other parts of CSS, as part of a complete system for doing the
layout. In this guide, I will explain how a grid fits together with other techniques you may already be using.

Grid and flexbox

The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one
dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same
time. The two specifications share some common features, however, and if you have already learned how to use flexbox,
the similarities should help you get to grips with Grid.

One-dimensional versus two-dimensional layout

A simple example can demonstrate the difference between one- and two-dimensional layouts.

In this first example, I am using flexbox to lay out a set of boxes. I have five child items in my container, and I have given
the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels.

I have also set the flex-wrap property to wrap, so that if the space in the container becomes too narrow to maintain the flex
basis, items will wrap onto a new row.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

.wrapper {
width: 500px;
display: flex;
flex-wrap: wrap;
}
.wrapper > div {
flex: 1 1 150px;
}

In the image, you can see that two items have wrapped onto a new line. These items are sharing the available space and
not lining up underneath the items above. This is because when you wrap flex items, each new row (or column when
working by column) is an independent flex line in the flex container. Space distribution happens across the flex line.

A common question then is how to make those items line up. This is where you want a two-dimensional layout method:
You want to control the alignment by row and column, and this is where grid comes in.

The same layout with CSS grids

Page 9 of 15
In this next example, I create the same layout using Grid. This time we have three 1fr column tracks. We do not need to
set anything on the items themselves; they will lay themselves out one into each cell of the created grid. As you can see
they stay in a strict grid, lining up in rows and columns. With five items, we get a gap on the end of row two.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

A simple question to ask yourself when deciding between grid or flexbox is:

 do I only need to control the layout by row or column – use a flexbox

 do I need to control the layout by row and column – use a grid

Content out or layout in?

In addition to the one-dimensional versus two-dimensional distinction, there is another way to decide if you should use
flexbox or grid for a layout. Flexbox works from the content out. An ideal use case for flexbox is when you have a set of
items and want to space them out evenly in a container. You let the size of the content decide how much individual space
each item takes up. If the items wrap onto a new line, they will work out their spacing based on their size and the available
space on that line.

Grid works from the layout in. When you use CSS Grid Layout you create a layout and then you place items into it, or
you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create
tracks that respond to the size of the content, however, they will also change the entire track.

If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS Grid Layout.
An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row
above. In that case, a grid is likely to be a better choice.

Box alignment

The feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time.
It made it easy to center a box on the page. Flex items can stretch to the height of the flex container, meaning that equal
height columns were possible. These were things we have wanted to do for a very long time, and have come up with all
kinds of hacks to accomplish, at least visually.

The alignment properties from the flexbox specification have been added to a new specification called Box Alignment
Level 3. This means that they can be used in other specifications, including Grid Layout. In the future, they may well
apply to other layout methods as well.

In a later guide in this series, I'll be taking a proper look at Box Alignment and how it works in Grid Layout. For now,
here is a comparison between simple examples of flexbox and grid.

In the first example, which uses flexbox, I have a container with three items inside. The wrapper min-height is set, so it
defines the height of the flex container. I have set align-items on the flex container to flex-end so the items will line up at
the end of the flex container. I have also set the align-self property on box1 so it will override the default and stretch to the
height of the container and on box2 so it aligns to the start of the flex container.

<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>

.wrapper {

Page 10 of 15
 display: flex;
align-items: flex-end;
min-height: 200px;
}
.box1 {
align-self: stretch;
}
.box2 {
align-self: flex-start;
}

Alignment in CSS Grids

This second example uses a grid to create the same layout. This time we are using the box alignment properties as they
apply to a grid layout. So we align to start and end rather than flex-start and flex-end. In the case of a grid layout, we are
aligning the items inside their grid area. In this case that is a single grid cell, but it could be an area made up of several
grid cells.

<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(3,1fr);
align-items: end;
grid-auto-rows: 200px;
}
.box1 {
align-self: stretch;
}
.box2 {
align-self: start;
}

The fr unit and flex-basis

We have already seen how the fr unit works to assign a proportion of available space in the grid container to our grid
tracks. The fr unit, when combined with the minmax() function can give us very similar behavior to the flex properties in
flexbox while still enabling the creation of a layout in two dimensions.

If we look back at the example where I demonstrated the difference between one and two-dimensional layouts, you can
see there is a difference between the way that the two layouts work responsively. With the flex layout, if we drag our
window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the
available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may
only have space for one.

In comparison, the grid version always has three column tracks. The tracks themselves will grow and shrink, but there are
always three since we asked for three when defining our grid.

Auto-filling grid tracks

We can use grid to create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns,
by creating our track listing using repeat notation and the auto-fill and auto-fit properties.

In this next example, I have used the auto-fill keyword in place of an integer in the repeat notation and set the track listing
to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>

Page 11 of 15
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}

A flexible number of tracks

This isn't quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping.
We can achieve the same in grid by combining auto-fit and the minmax() function. In this next example, I create auto
filled tracks with minmax. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be 1fr. Once the
browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will
treat the 1fr maximum as an instruction to share out the remaining space between the items.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

We now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid
aligned by rows and columns at the same time.

Grid and absolutely positioned elements

Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or
grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely
positioned item.

A grid container as containing block

To make the grid container a containing block you need to add the position property to the container with a value of
relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if
you give a grid item position: absolute it will take as its containing block the grid container or, if the item also has a grid
position, the area of the grid it is placed into.

In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on
the grid using line-based placement. The grid container has position: relative and so becomes the positioning context of
this item.

<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">
This block is absolutely positioned. In this example the grid container is the containing block and so the absolute
positioning offset values are calculated in from the outer edges of the area it has been placed into.
</div>
<div class="box4">Four</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-auto-rows: 200px;
gap: 20px;
position: relative;
}
.box3 {
grid-column-start: 2;
Page 12 of 15
 grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
position: absolute;
top: 40px;
left: 40px;
}

You can see that the item is taking the area from grid column line 2 to 4, and starting after line 1. Then it is offset in that
area using the top and left properties. However, it has been taken out of flow as is usual for absolutely positioned items
and so the auto-placement rules now place items into the same space. The item also doesn't cause the additional row to be
created to span to row line 3.

If we remove position: absolute from the rules for .box3 you can see how it would display without the positioning.

A grid container as parent

If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning
context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a
positioning context as is common to other layout methods. In our case, if we remove position: relative from the wrapper
above, positioning context is from the viewport, as shown in this image.

Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.

With a grid area as the parent

If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the
below example we have our grid as before but this time I have nested an item inside .box3 of the grid.

I have given .box3 position relative and then positioned the sub-item with the offset properties. In this case, the
positioning context is the grid area.

<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three
<div class="abspos">
This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning
offset values are calculated in from the outer edges of the grid area.
</div>
</div>
<div class="box4">Four</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-auto-rows: 200px;
gap: 20px;
}
.box3 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
position: relative;
}
Page 13 of 15
.abspos {
position: absolute;
top: 40px;
left: 40px;
background-color: rgba(255,255,255,.5);
border: 1px solid rgba(0,0,0,0.5);
color: #000;
padding: 10px;
}

Grid and display: contents

A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout
and display: contents. The contents value of the display property is a new value that is described in the Display
specification as follows:

"The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For
the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and
pseudo-elements in the document tree."

If you set an item to display: contents, the box it would normally create disappears and the boxes of the child elements
appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is
a simple example.

Grid layout with nested child elements

In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three
nested items. As these items are not direct children, they don't become part of the grid layout and so display using regular
block layout.

<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
<div class="nested">c</div>
</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
}

Using display: contents

If I now add display: contents to the rules for box1, the box for that item vanishes and the sub-items now become grid
items and lay themselves out using the auto-placement rules.

<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
<div class="nested">c</div>
</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
Page 14 of 15
 <div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
display: contents;
}

This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the
issues that would be solved by subgrids once they are implemented. You can also use display: contents in a similar way
with flexbox to enable nested items to become flex items.

As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don't be afraid to mix it with other
methods of doing layout to get the different effects you need.

Page 15 of 15