The Grid layout

The CSS Grid layout is the most powerful CSS layout system. Unlike Flexbox’s one-dimensional layout system, CSS Grid is a two-dimensional layout system, which means it can handle columns and rows at the same time. You can easily use Grid layouts by applying CSS rules to parent elements (Grid containers) and child elements (Grid Items).

Introduction to the

CSS Grid layout (also known as “Grid”) is a two-dimensional grid-based layout system that aims to completely change the way our grid-based user interfaces are laid out.

CSS has always been used to lay out our web pages, but there have always been problems of one kind or another.

We started with tables, then floats, then postion and inline-blocks, but all of these methods are essentially hacks and leave out a lot of important features (like vertical center).

Flexbox has greatly improved the way we layout, but it was designed to solve simpler one-dimensional layouts rather than complex two-dimensional ones (in fact Flexbox and Grid work together and work very well together).

The Grid layout was the first CSS module created specifically to solve layout problems, and we’ll be talking about them for as long as we make websites.

There are two main factors that inspired me to create this guide. The first is Rachel Andrew’s excellent book preparing for CSS Grid layouts.

This book provides a thorough and clear introduction to Grid layout and is the basis for this guide. I highly recommend you buy it and read it.

Another inspiration came from Chris Coyier’s Complete Guide to Flexbox Layout, which is my preferred resource for learning about Flexbox.

This article has helped a lot of people, as can be seen from Google’s # 1 “Flexbox” ranking. You will find many similarities between that article and mine, why not follow the best one?

The purpose of this guide is to introduce the concept of Grid that exists in the latest version of the specification. So I won’t be overwriting outdated IE syntax, and I’ll do my best to update this guide as the specification matures.

Basic knowledge and browser support

First, you must use display: Grid defines the container element as a grid layout, using grid-template-columns and grid-template-rows to set the size of the columns and rows. The child elements are then placed into the grid via grid-column and grid-row.

Like Flexbox, the source (HTML structure) order of grid items does not matter. Your CSS can place them in any order, which makes it easy to rearrange the grid using media queries.

It’s exciting to imagine defining the layout of an entire page and then completely rearranging the layout to fit different screen widths with just a few lines of CSS. The Grid layout is one of the most powerful CSS modules ever created.

As of March 2017, many browsers offer native support for CSS Grid without a browser prefix: Chrome (including Android), Firefox, Edge, Safari (including iOS), and Opera. Internet Explorer 10 and 11, on the other hand, support it, but it is an outdated syntactic implementation. Now it’s time to use the Grid to lay out your web pages!

This browser supports CSS Grid data from Caniuse, which you can view in more detail. Numbers indicate the browser versions that support the preceding functions.

Desktop browser

Chrome Opera Firefox IE Edge Safari
57 44 52 11 (Old Grammar) 16 10.1

Mobile/Tablet browser

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
10.3 46 No 67 70 63

Other than Microsoft, browser vendors don’t seem to have developed their own implementations of the Grid(such as prefixes) until the specification is fully mature. This is a good thing because it means we don’t have to worry about learning multiple grammars.

It is only a matter of time before the Grid is used in production. But now it’s time to learn.

Important terms

Before delving into Grid concepts, it’s important to understand the terminology. Because the terms involved here are conceptually similar, it’s easy to confuse them without first remembering what the Grid specification defines. But don’t worry, there’s not much jargon.

Grid Container

Apply the display: grid element. This is the immediate parent of all Grid Items. In this case, the Container is the Grid Container.

HTML code:

<div class="container">
	<div class="item item-1"></div>
	<div class="item item-2"></div>
	<div class="item item-3"></div>
</div>
Copy the code

Grid Items

Children of a Grid Container (such as direct children). Here the item element is a Grid item, but the sub-item is not.

HTML code:

<div class="container">
	<div class="item"></div>
	<div class="item">
		<p class="sub-item"></p>
	</div>
	<div class="item"></div>
</div>
Copy the code

Grid lines

The dividing line that forms the grid structure. They can be vertical (” column grid lines “) or horizontal (” row grid lines “) on either side of a row or column. For example, the yellow line here is a grid line.

Grid Track

The space between two adjacent grid lines. You can think of them as columns or rows of a grid. Below is the Grid Track between the second and third Grid lines.

Grid cells

The space between two adjacent row and two adjacent column grid lines. This is a “unit” of a Grid system. The Grid Cell formed by the intersection of Grid lines from lines 1 to 2 and columns 2 to 3 is shown in the figure below.

Grid Area

The total space enclosed by 4 grid lines. A Grid Area can be composed of any number of Grid cells. Below is the grid area between row grid lines 1 and 3 and column grid lines 1 and 3.

The Grid property directory

Grid Container property

  • display
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-template
  • grid-column-gap
  • grid-row-gap
  • grid-gap
  • justify-items
  • align-items
  • place-items
  • justify-content
  • align-content
  • place-content
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
  • grid

Grid Items property

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
  • grid-column
  • grid-row
  • grid-area
  • justify-self
  • align-self
  • place-self

The parent element Grid Container property

display

Define the element as a grid container and establish a new grid format context for its content.

Value:

  • grid: Generates a block-level grid
  • inline-grid: Generates an inline grid

The CSS code:

.container {
	display: grid | inline-grid;
}
Copy the code

Note: The ability to pass Grid parameters down through nested elements (also known as subgrids, or subgrids) has moved to the Level 2 version of the CSS Grid specification. Here’s a quick explanation.

grid-template-columns / grid-template-rows

A whitespace separated list of values used to define the columns and rows of the grid. These values represent Grid Track sizes, and the Spaces between them represent Grid lines.

Values: –: can be a length value, percentage, or equal amount of space available in the grid container (using FR units) – : any name you can choose

The CSS code:

.container {
	grid-template-columns: <track-size> ... | <line-name> <track-size> ... ; grid-template-rows: <track-size> ... | <line-name> <track-size> ... ; }Copy the code

Example:

When you leave Spaces between Grid Track values, Grid lines are automatically assigned positive and negative names:

The CSS code:

.container {
	grid-template-columns: 40px 50px auto 50px 40px;
	grid-template-rows: 25% 100px auto;
}
Copy the code

But you can specify Grid Line names explicitly, such as . Note the parenthesis syntax for grid line names:

The CSS code:

.container {
	grid-template-columns:
		[first] 40px [line2] 50px
		[line3] auto [col4-start] 50px [five] 40px [end];
	grid-template-rows:
		[row1-start] 25% [row1-end] 100px
		[third-line] auto [last-line];
}
Copy the code

Note that a Grid Line can have multiple names. For example, the second row grid lines here will have two names: row1-end and row2-start:

The CSS code:

.container {
	grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}
Copy the code

If your definition contains multiple duplicate values, you can use the repeat() notation to simplify the definition:

The CSS code:

.container {
	grid-template-columns: repeat(3.20px [col-start]);
}
Copy the code

The above code is equivalent to:

The CSS code:

.container {
	grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}
Copy the code

If multiple rows share the same name, they can be referenced by their gridline name and count.

The CSS code:

.item {
	grid-column-start: col-start 2;
}
Copy the code

The FR unit allows you to set the size of Grid tracks with the free space of the Grid container divided equally. For example, the following code sets each grid item to one-third the width of the grid container:

The CSS code:

.container {
	grid-template-columns: 1fr 1fr 1fr;
}
Copy the code

The remaining free space is calculated after removing all non-flexible grid items. In this example, subtract 50px from the total available space and divide the value of the FR cell by 3:

The CSS code:

.container {
	grid-template-columns: 1fr 50px 1fr 1fr;
}
Copy the code

grid-template-areas

Define a grid template by referring to the grid area name specified by the grid-area attribute. Repeating the name of a grid area causes content to span those cells. A dot (.) Represents an empty cell. The syntax itself can be viewed as a visual structure of the grid.

Value:

  • <grid-area-name>: by the grid itemgrid-areaSpecifies the name of the grid region
  • .(dot) : Represents an empty grid cell
  • none: Does not define grid regions

The CSS code:

.container {
	grid-template-areas:
		"<grid-area-name> | . | none | ..."
		"...";
}
Copy the code

Example:

The CSS code:

.item-a {
	grid-area: header;
}
.item-b {
	grid-area: main;
}
.item-c {
	grid-area: sidebar;
}
.item-d {
	grid-area: footer;
}
.container {
	grid-template-columns: 50px 50px 50px 50px;
	grid-template-rows: auto;
	grid-template-areas:
		"header header header header"
		"main main . sidebar"
		"footer footer footer footer";
}
Copy the code

The above code will create a grid 4 columns wide and 3 rows high. The entire top line consists of the header area. The middle row will consist of two main fields, an empty cell, and a sidebar field. The last line is made up entirely of footer fields.

Each row in your declaration needs to have the same number of cells.

You can use any number of adjacent points. To declare a single empty cell. As long as there’s no space between the dots, they represent a single cell.

Note that you cannot use this syntax to name grid lines, only grid regions. When you use this syntax, the grid lines at each end of the area are actually named automatically. If the name of your grid region is foo, the start row and start column grid lines of the region will be named foo-start, and the last row and last column grid lines will be named foo-end. This means that some grid lines may have multiple names, such as the leftmost grid line in the example above, which will have three names: header-start, main-start, and footer-start.

grid-template

Use to define grid-template-rows, grid-template-columns, grid-template-areas abbreviation attributes.

Value:

  • none: Sets all three properties to their initial values
  • <grid-template-rows> / <grid-template-columns>Will:grid-template-columns 和 grid-template-rowsSet to the corresponding specific value, and setgrid-template-areasfornone

The CSS code:

.container {
	grid-template: none | <grid-template-rows> / <grid-template-columns>;
}
Copy the code

This property also accepts a more complex but convenient syntax for specifying three appeal properties. Here’s an example:

The CSS code:

.container {
    grid-template:
        [row1-start] "header header header" 25px [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}
Copy the code

Is equivalent to:

The CSS code:

.container {
    grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
    grid-template-columns: auto 50px auto;
    grid-template-areas:
        "header header header"
        "footer footer footer";
}
Copy the code

Since grid-template doesn’t reset implicit grid properties (grid-auto-columns, grid-auto-rows, and grid-auto-flow), which is probably what you want to do in most cases, It is recommended to use the grid property instead of grid-template.

grid-column-gap / grid-row-gap

Specifies the size of grid lines. You can think of it as setting the width of the spacing between columns/rows.

Value:

  • <line-size>: the length value

The CSS code:

.container {
	grid-column-gap: <line-size>;
	grid-row-gap: <line-size>;
}
Copy the code

Example:

The CSS code:

.container {
	grid-template-columns: 100px 50px 100px;
	grid-template-rows: 80px auto 80px;
	grid-column-gap: 10px;
	grid-row-gap: 15px;
}
Copy the code

You can only create spacing between columns/rows, not the outer edges of the grid.

Note: These two attributes remove the grid-prefix by renaming grid-column-gap and grid-row-gap to column-gap and row-gap. Chrome 68+, Safari 11.2 Release 50+, and Opera 54+ already support prefixed properties.

grid-gap

Grid-column-gap and grid-row-gap shorthand syntax

Value:

  • <grid-row-gap> <grid-column-gap>: the length value

The CSS code:

.container {
	grid-gap: <grid-row-gap> <grid-column-gap>;
}
Copy the code

Example:

The CSS code:

.container {
	grid-template-columns: 100px 50px 100px;
	grid-template-rows: 80px auto 80px;
	grid-gap: 15px 10px;
}
Copy the code

If grid-row-gap is not defined, it is set to the same value as grid-column-gap. For example, the following code is equivalent:

The CSS code:

.container {
	/* Set grid-column-gap and grid-row-gap */
	grid-column-gap: 10px;
	grid-row-gap: 10px; /* is equivalent to */
	grid-gap: 10px 10px; /* is equivalent to */
	grid-gap: 10px;
}
Copy the code

Note: This property will remove the grid-prefix by renaming grid-gap to gap. Chrome 68+, Safari 11.2 Release 50+, and Opera 54+ already support prefixed properties.

justify-items

Align grid items along the inline axis (the opposite property is align align-items along the block axis). This value applies to all grid items within the container.

Value:

  • start: Aligns grid items to the starting left edge of their cells (left aligned)
  • end: Aligns grid items to the right end edge of their cells (right aligned)
  • center: Aligns grid items to the horizontal middle of their cells (horizontally centered alignment)
  • stretch: Fills the width of the cell (default)

The CSS code:

.container {
	justify-items: start | end | center | stretch;
}
Copy the code

Example:

The CSS code:

.container {
	justify-items: start;
}
Copy the code

The CSS code:

.container {
	justify-items: end;
}
Copy the code

The CSS code:

.container {
	justify-items: center;
}
Copy the code

The CSS code:

.container {
	justify-items: stretch;
}
Copy the code

These behaviors can also be set using the context-self property for each individual grid item.

align-items

Align grid items along the block axis (the opposite attribute is precision-items aligned along the inline axis). This value applies to all grid items within the container.

Value:

  • start: Aligns grid items to the top start edge of their cells (top alignment)
  • end: Aligns grid items to the bottom end edge of their cells (bottom alignment)
  • center: Aligns grid items vertically in the middle of their cells (vertically centered alignment)
  • stretch: Height to fill the cell (default)

The CSS code:

.container {
	align-items: start | end | center | stretch;
}
Copy the code

Example:

The CSS code:

.container {
	align-items: start;
}
Copy the code

The CSS code:

.container {
	align-items: end;
}
Copy the code

The CSS code:

.container {
	align-items: center;
}
Copy the code

The CSS code:

.container {
	align-items: stretch;
}
Copy the code

These behaviors can also be set with the align-self property for each individual grid item.

place-items

Place-items is a shorthand for setting align-items and context-items.

Value:

  • <align-items> <justify-items>: The first value settingalign-itemsProperty, the second value settingjustify-itemsProperties. If the second value is omitted, the first value is assigned to both attributes.

All major browsers except Edge support the place-items shorthand property.

See align-items and context-items for more details.

justify-content

Sometimes, your grid total size may be smaller than its Grid Container size. This can happen if all your grid items are sized in non-flexible units like PX.

In this case, you can set the alignment of the grid within the grid container. This property aligns the grid along the inline (row) axis (the opposite property is align-content, which aligns the grid along the block (column) axis).

Value:

  • start: Align the grid to the starting left edge of the Grid Container (left aligned)
  • endAlign the grid to the right end edge of the grid container (right aligned)
  • centerAlign the grid to the middle of the grid container horizontally (horizontally centered alignment)
  • stretch: Adjusts the width of grid items to allow the grid to fill the width of the grid container
  • space-around: Place an even space between each grid item, with half of the space on the left and right ends
  • space-between: Place an even space between each grid item, with no space left or right
  • space-evenly: Place a uniform space between each grid item and a uniform space at the left and right ends

The CSS code:

.container {
	justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
Copy the code

Example:

The CSS code:

.container {
	justify-content: start;
}
Copy the code

The CSS code:

.container {
	justify-content: end;
}
Copy the code

The CSS code:

.container {
	justify-content: center;
}
Copy the code

The CSS code:

.container {
	justify-content: stretch;
}
Copy the code

The CSS code:

.container {
	justify-content: space-around;
}
Copy the code

The CSS code:

.container {
	justify-content: space-between;
}
Copy the code

The CSS code:

.container {
	justify-content: space-evenly;
}
Copy the code

align-content

Sometimes, your grid total size may be smaller than its Grid Container size. This can happen if all your grid items are sized in non-flexible units like PX.

In this case, you can set the alignment of the grid within the grid container. This property aligns the grid along the block (column) axis (the opposite property is context-content, which aligns the grid along the inline (row) axis).

Value:

  • start: Align the grid to the top start edge of the Grid Container (top alignment)
  • end: Align the grid to the bottom end edge of the grid container (bottom align)
  • centerAlign the grid to the vertical center of the grid container (vertical center alignment)
  • stretch: Adjusts the height of grid items to allow the grid to fill the height of the entire grid container
  • space-around: Place an even space between each grid item, with half of the space at the upper and lower ends
  • space-between: Place an even space between each grid item, with no space at either end
  • space-evenly: Place a uniform space between each grid item and a uniform space above and below each grid item

The CSS code:

.container {
	align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
Copy the code

Example:

The CSS code:

.container {
	align-content: start;
}
Copy the code

The CSS code:

.container {
	align-content: end;
}
Copy the code

The CSS code:

.container {
	align-content: center;
}
Copy the code

The CSS code:

.container {
	align-content: stretch;
}
Copy the code

The CSS code:

.container {
	align-content: space-around;
}
Copy the code

The CSS code:

.container {
	align-content: space-between;
}
Copy the code

The CSS code:

.container {
	align-content: space-evenly;
}
Copy the code

place-content

Place-content is a shorthand for setting align-content and context-content.

Value:

  • <align-content> <justify-content>: The first value settingalign-contentProperty, the second value settingjustify-contentProperties. If the second value is omitted, the first value is assigned to both attributes.

All major browsers except Edge support the place-content shorthand property.

See align-content and context-content for more details.

grid-auto-columns / grid-auto-rows

Specifies the size of any automatically generated grid tracks (aka implicit grid tracks). Implicit tracks are created when there are more grid items in the grid than cells, or when grid items are outside the explicit grid. (See the difference between explicit and implicit grids)

Value:

  • <track-size>: can be a length value, a percentage, or a fraction of the space available in an equal portion of the grid container (usefrUnits)

The CSS code:

.container {
	grid-auto-columns: <track-size>... ; grid-auto-rows: <track-size>... ; }Copy the code

To illustrate how to create an implicit grid track, consider the following code:

The CSS code:

.container {
	grid-template-columns: 60px 60px;
	grid-template-rows: 90px 90px;
}
Copy the code

This will produce a 2-by-2 grid.

But now imagine that you use grid-column and grid-row to position your grid items like this:

The CSS code:

.item-a {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
.item-b {
	grid-column: 5 / 6;
	grid-row: 2 / 3;
}
Copy the code

We tell.item-b to start at column 5 and end at column 6, but we never define column 5 or 6. Because the grid line we referenced does not exist, we create an implicit grid track with a width of 0 to fill the gap. We can use grid-auto-columns and grid-auto-rows to specify the size of these implicit tracks:

The CSS code:

.container {
	grid-auto-columns: 60px;
}
Copy the code

grid-auto-flow

If you have grid items that are not explicitly placed on the grid, the autoplace algorithm will place them automatically. This property controls how the automatic layout algorithm works.

Value:

  • row: Tells the automatic layout algorithm to fill each row in turn, adding new rows as needed (default)
  • column: tells the automatic layout algorithm to fill in each column in turn and add new columns as needed
  • dense: tells the automatic layout algorithm to try to fill earlier gaps in the grid when smaller grid items appear later

The CSS code:

.container {
	grid-auto-flow: row | column | row dense | column dense;
}
Copy the code

Note that Dense only changes the visual order of grid items and can cause them to be out of order, which is not good for accessibility.

Example:

Consider the following HTML:

HTML code:

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>
Copy the code

You define a grid with 5 columns and 2 rows and set grid-auto-flow to row (the default) :

The CSS code:

.container {
	display: grid;
	grid-template-columns: 60px 60px 60px 60px 60px;
	grid-template-rows: 30px 30px;
	grid-auto-flow: row;
}
Copy the code

When placing a grid item on a grid, only two of them can be specified:

The CSS code:

.item-a {
	grid-column: ;
	grid-row: 1 / 3;
}
.item-e {
	grid-column: ;
	grid-row: 1 / 3;
}
Copy the code

Because we set grid-auto-flow to row, our grid will look like this. Note that the grid items (item-b, item-c, item-d) that we have not positioned are arranged in the available rows like this:

Conversely, if we set grid-auto-flow to column, item-b, item-c, and item-d will be arranged down the column:

The CSS code:

.container {
	display: grid;
	grid-template-columns: 60px 60px 60px 60px 60px;
	grid-template-rows: 30px 30px;
	grid-auto-flow: column;
}
Copy the code

grid

Set the shorthand for all of the following properties in one declaration: Grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow. Note: You can only specify explicit or implicit grid attributes in a single grid declaration.

Value:

  • none: Sets all child attributes to their initial values.
  • <grid-template>And:grid-templateThe shorthand works in the same way.
  • <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?Will:grid-template-rowsSets to the specified value. ifauto-flowIf the keyword is to the right of the slash, thegrid-auto-flowSet tocolumn. If specified otherwisedenseKeyword, the automatic placement algorithm uses the “dense” algorithm. If you omitgrid-auto-columns, sets it toauto.
  • [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>Will:grid-template-columnsSet to the specified value. ifauto-flowIf the keyword is to the left of the slash, thegrid-auto-flowSet torow. If specified otherwisedenseKeyword, the automatic placement algorithm uses the “dense” packaging algorithm. If you omitgrid-auto-rows, sets it toauto.

Example:

The following two code blocks are equivalent:

The CSS code:

.container {
	grid: 100px 300px / 3fr 1fr;
}
Copy the code

The CSS code:

.container {
	grid-template-rows: 100px 300px;
	grid-template-columns: 3fr 1fr;
}
Copy the code

The following two code blocks are equivalent:

The CSS code:

.container {
	grid: auto-flow / 200px 1fr;
}
Copy the code

The CSS code:

.container {
	grid-auto-flow: row;
	grid-template-columns: 200px 1fr;
}
Copy the code

The following two code blocks are equivalent:

The CSS code:

.container {
	grid: auto-flow dense 100px / 1fr 2fr;
}
Copy the code

The CSS code:

.container {
	grid-auto-flow: row dense;
	grid-auto-rows: 100px;
	grid-template-columns: 1fr 2fr;
}
Copy the code

The following two code blocks are equivalent:

The CSS code:

.container {
	grid: 100px 300px / auto-flow 200px;
}
Copy the code

The CSS code:

.container {
	grid-template-rows: 100px 300px;
	grid-auto-flow: column;
	grid-auto-columns: 200px;
}
Copy the code

It also accepts a more complex but rather convenient syntax for setting everything up at once. You can specify grid-template-areas, grid-template-rows, and grid-template-columns, and all the other child attributes are set to their initial values. Doing so will specify the grid line name and grid track size accordingly within their grid area. Here’s the simplest example:

The CSS code:

.container {
	grid:
		[row1-start] "header header header" 1fr [row1-end]
		[row2-start] "footer footer footer" 25px [row2-end]
		/ auto 50px auto;
}
Copy the code

Is equivalent to:

The CSS code:

.container {
	grid-template-areas:
		"header header header"
		"footer footer footer";
	grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
	grid-template-columns: auto 50px auto;
}
Copy the code

Grid Items property of the child element

Note: Float, display: inline-block, display: table-cell, vertical-align and column-* properties are not valid for grid entries.

grid-column-start / grid-column-end / grid-row-start / grid-row-end

The position of a grid item in a grid is determined by referring to specific grid lines. Grid-column-start/grid-row-start is the grid line at the beginning of the grid item, grid-column-end/grid-row-end is the grid line at the end of the grid item.

Value:

  • <line>Can be a number referencing a numbered gridline, or a name referencing a named gridline
  • span <number>: This grid item will span the number of grid tracks provided
  • span <name>: The grid item will span to its location with the name provided
  • auto: stands for automatic placement, automatic span, which extends the width or height of a grid track by default

The CSS code:

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}
Copy the code

Example:

The CSS code:

.item-a {
  grid-column-start:;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3;
}
Copy the code

The CSS code:

.item-b {
  grid-column-start:;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}
Copy the code

If grid-column-end/grid-row-end is not specified, by default the grid item will occupy one track.

Projects can overlap. You can use z-index to control the order in which they overlap.

grid-column / grid-row

Grid-column-start + grid-column-end and grid-row-start + grid-row-end, respectively.

Value:

  • <start-line> / <end-line>: Each grid entry accepts all the same values as the plain written version, including the span

The CSS code:

.item {
	grid-column: <start-line> / <end-line> | <start-line> / span <value>;
	grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
Copy the code

Example:

The CSS code:

.item-c {
	grid-column: 3 / span 2;
	grid-row: third-line / 4;
}
Copy the code

If the end of the separator is not declared, the grid item defaults to occupy one grid track.

grid-area

Give the grid item a name so that it can be referenced by templates created using the grid-template-Areas attribute of the grid container. Alternatively, this property can be used as shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.

Value:

  • <name>: The name you have chosen
  • <row-start> / <column-start> / <row-end> / <column-end>: Number or separator name

The CSS code:

.item {
	grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
Copy the code

Example:

As a way of assigning names to grid items:

The CSS code:

.item-d {
	grid-area: header;
}
Copy the code

Short form of grid-row-start + grid-column-start + grid-row-end + grid-column-end property

The CSS code:

.item-d {
	grid-area: 1 / col4-start / last-line / 6;
}
Copy the code

justify-self

Aligns grid items along the inline axis (the opposite attribute is align-self, which aligns along the block axis). This value applies to the content within a single grid item.

Value:

  • start: Aligns grid items to the starting left edge of their cells (left aligned)
  • end: Aligns grid items to the right end edge of their cells (right aligned)
  • center: Aligns grid items to the horizontal middle of their cells (horizontally centered alignment)
  • stretch: Fills the width of the cell (default)

The CSS code:

.item {
	justify-self: start | end | center | stretch;
}
Copy the code

Example:

The CSS code:

.item-a {
	justify-self: start;
}
Copy the code

The CSS code:

.item-a {
	justify-self: end;
}
Copy the code

The CSS code:

.item-a {
	justify-self: center;
}
Copy the code

The CSS code:

.item-a {
	justify-self: stretch;
}
Copy the code

To set the row axis alignment for all grid items in the grid, you can also set the context-items property on the grid container.

align-self

Align the grid items along the block axis (the opposite attribute is context-self, aligned along the inline axis). This value applies to the content within a single grid item.

Value:

  • start: Aligns grid items to the top start edge of their cells (top alignment)
  • end: Aligns grid items to the bottom end edge of their cells (bottom alignment)
  • center: Aligns grid items vertically in the middle of their cells (vertically centered alignment)
  • stretch: Height to fill the cell (default)

The CSS code:

.item {
	align-self: start | end | center | stretch;
}
Copy the code

Example:

The CSS code:

.item-a {
	align-self: start;
}
Copy the code

The CSS code:

.item-a {
	align-self: end;
}
Copy the code

The CSS code:

.item-a {
	align-self: center;
}
Copy the code

The CSS code:

.item-a {
	align-self: stretch;
}
Copy the code

To set alignment on the column axis for all grid items in the grid, you can also set the align-items property on the grid container.

place-self

Place-self is shorthand for setting align-self and context-self.

Value:

  • auto– Default alignment of layout mode.
  • <align-self> <justify-self>: The first value settingalign-selfProperty, the second value settingjustify-selfProperties. If the second value is omitted, the first value is assigned to both attributes.

Example:

The CSS code:

.item-a {
	place-self: center;
}
Copy the code

The CSS code:

.item-a {
	place-self: center stretch;
}
Copy the code

All major browsers except Edge support the place-self shorthand property.

Animation

According to the CSS Grid Layout module Level 1 specification, there are five Grid properties that can be animated:

  • grid-gap.grid-row-gap.grid-column-gapAs length, percentage or calc.
  • grid-template-columns.grid-template-rowsAs a simple list of length, percentage, or CALC, as long as the length, percentage, or CALC component values in the list are different.

Browsers support CSS grid properties

As of May 7, 2018, only (grid-gap), (grid-row – Gap, and (grid-column – Gap animations are implemented in the browsers tested.

The browser supports animatable grid properties:

The browser (grid-)gap, (grid-)row-gap, (grid-)column-gap grid-template-columns grid-template-rows
Firefox 55+, Firefox 53+ Mobile ✅ ❌ ❌
Safari 11.0.2 ❌ ❌ ❌
Chrome 66+ ✅ ❌ ❌
Chrome for Android 66+, Opera Mini 33+ ✅ ❌ ❌
Edge 16+ ✅ ❌ ❌