Introduction to the

CSS Grid Layout, designed to completely change the way we deal with grids, is a two-dimensional table system. CSS is often used for layout, even if it doesn’t perform very well. Initially, we used tabels, floats, positions, and inline-blocks, but all of these methods were mostly dark tech and left out many important features (such as vertical centering). The Flexbox helps here, but its goal is a simple one-dimensional layout, not a complex two-dimensional one. (In fact, Flexbox and Grid work well together.) Grid was the first CSS module designed for layout.

Basic and browser compatibility

To start, you define a table container with display: grid, set the column and row sizes with grid-template-columes and grid-template-rows, and place child elements in the columns and rows of the table. Like Flexbox, the order of grid items does not matter. Your CSS can sort them any way you want, and it’s easy to rearrange the layout using media queries. Imagine defining the layout of an entire page and then being able to completely rearrange it to fit different screen widths with just a few lines of CSS, and the Grid is one of the most powerful CSS modules ever created.

As of March 2017, most browsers offer native, unprefixed CSS Grid support: Chrome (including Android), Firefox, Safari (including iOS), and Opera. On the other hand, Internet Explorer 10 and 11 support it, but it is an outdated syntax. Now it’s time to build with the Grid!

Desktop

Chrome Opera Firefox IE Edge Safari
57 44 52 11 * 16 10.1

Mobile / Tablet

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

Important terms

Before delving into the Grid, it’s important to understand the terminology. Because the terms involved here are conceptually similar, it’s easy to confuse them with each other if you don’t first remember what the grid specification definition means. But don’t worry, there aren’t many of them.

Grid containers

Apply the display: grid element, which is the immediate parent of the table entry. In the following example, the Container is the grid container.

<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

The grid item

It is a direct child of the grid container. In the following example, item is the grid item, but sub-item is not.

<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 of the grid structure. There are vertical (grid row lines), horizontal (grid row lines), and lines that reside on either side of the row and column. The bottom yellow is the grid line.

The grid orbit

The space between two adjacent grid lines. You can think of them as grid columns or rows. The grid track below is the space between the second and third lines.

Grid cell

The space between two adjacent rows and two adjacent column grid lines. It is a single “cell” of the grid. This is the grid cell between row grid lines 1 and 2 and column grid lines 2 and 3.

The grid area

The total space enclosed by four grid lines. A grid region can contain any number of grid cells. This is the area of the grid between row grid lines 1 and 3 and column grid lines 1 and 3.

Grid property list

Properties of the grid container

display

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

Value:

Grid – Generates block-level grids

Inline-grid – Generates an inline cascading grid

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

grid-template-columes

grid-template-rows

Define the columns and rows of the grid using a whitespace separated list of values. The value represents the track size, and the space between them represents the grid lines.

Value:

– can be a length, percentage, or part of a table space (using FR units)

– Any name you choose 

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

For example, when you leave a blank space between track values, the grid lines automatically assign positive and negative numbers:

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

You can, however, choose to name rows explicitly. Note the parenthesis syntax for line names:

.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 line can have more than one name. For example, here the second line has two names: row1-end and row2-start:

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

If your definition contains repeating parts, you can use the repeat() method to simplify:

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

The above code is equivalent to:

.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 line name and count.

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

The FR cell allows you to set the size of the track as part of the available space of the grid container. For example, this sets each item to one-third the width of the grid container:

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

Calculate the available space after any non-flexible project. In this example, the total amount of free space available to the FR cell does not include 50px:

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

grid-template-areas

Define a grid template by referring to the name of the grid region specified with the grid-area attribute. Repeating the name of a grid area causes content to span those cells. A period indicates an empty cell. The syntax itself provides a visualization of the grid structure.

Value:


– Specifies the name of the grid area specified with grid-area

. – Periods indicate blank grid areas

None – No grid region is defined

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

For example:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  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

This will create a grid four columns wide and three rows high. The entire top line consists of the header area. The middle row contains two main areas, an empty cell and a sidebar area. The last line is all the footers.

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

You can declare a single empty cell with any number of adjacent periods. As long as there are no Spaces between them, they represent a cell.

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

grid-template

Set abbreviations for grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.

Value:

None – Sets three properties to their initial values


/

– set grid-template-columns and grid-template-rows to specific values, Set grid-template-areas to None

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

It can also accept a complex three-way syntax. Here’s an example:

.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:

.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 does not reset implicit grid attributes (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 grid attributes instead of grid templates.

grid-column-gap

grid-row-gap

Specifies the size of the grid line. You can think of this as setting the binding line width between columns/rows.

Value:

– A length value 

![dddgrid-gap](C: \blog\dddgrid-gap.svg).container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}
Copy the code

For example:

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

Spacing can only be created between rows and columns, and cannot be set outside.

Note: Grid-column-gap and grid-row-gap prefixes grid-gap have been removed and renamed column-gap and row-gap. The prefix-free property is already supported by Chrome 68+, Safari 11.2, and Opera 54+.

grid-gap

Short for grid-row-gap and grid-column-gap

Value:



– Length value

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

Here’s an example:

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

If no grid-row-gap is defined, it will be set to the same value as grid-column-gap.

Note: Grid-gap prefix has also been removed and renamed to gap. It is also supported by Chrome 68+, Safari 11.2+ and Opera 54+.

justify-item

Align grid items along the inline (row) axis (not aligned items along the block (column) axis). This value applies to all grid items within the container.

Value:

Strat – Odd to the beginning edge of the cell

End – Aligns with the end edge of the cell

Center – Aligned with the center of the cell

Stretch – Stretch to fill the entire cell (default)

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

For example:

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

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

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

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

These behaviors can also be redefined by the context-self of the grid item.

align-items

Align grid items along column grid lines (instead of alignment items along row grid lines). This value applies to all grid items within the container.

Value:

Start – aligns it with the top edge of the cell

End – aligns it with the lower edge of the cell

Center – Aligns it with the center of the cell

Stretch – Extends vertically to the entire cell

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

For example:

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

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

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

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

This representation can also be set individually with align-self to set the grid cell.

place-items

Place-items a declaration can set both the align-items and context-items properties

Value:


/

– the first value is set to align-items and the second value is set to justify-items. If there is no second value, both attributes have the same value. All major browsers except Edge support the place-items property.

justify-content

Sometimes your content area may be smaller than the entire grid area. This can happen if all of your grid items are resized using inflexible units, such as PX. In this case, you can set the alignment of the grid in the grid container. This property aligns the grid along the inline (row) axis (rather than the aligned content of the grid along the block (column) axis).

Value: start – Aligns the grid with the starting edge of the grid container

End – Aligns the grid with the end edge of the grid container

Center – Flush the grid with the middle of the grid container

Stretch – Resizes the grid item to allow the grid to fill the entire width of the grid container

Space-around – Place an even space between each grid item, with a half-sized space at the far end

Space-between – Places an even space between each grid item, with no Spaces at the far end

Space – instituted – places a uniform space between each mesh item, including the distal end

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

For example:

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

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

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

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

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

align-content

Sometimes the total mesh size is smaller than the mesh container. This happens when grid items are sized in inelastic units such as PX. In this case you can set the mesh alignment. This property sets the alignment of the column axis, and the justify-content property sets the orientation of the row axis!

Value:

Start – Aligns the grid to the top start edge line of the grid container

End – Aligns the grid to the bottom edge of the grid container

Center – Aligns the grid in the center of the grid container

Stretch – The mesh is stretched to fill the entire mesh container

Space-around – Place an even space between each row grid item, with a half-sized space at each end

Space-between – Places an even space between each row grid item, with no Spaces at either end

Space – instituted – places an even space between and at each end of each row grid item

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

For example:

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

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

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

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

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

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

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

place-content

Place-content is a shorthand for setting both justify-content and align-content

Value:


/< context-content > – the first value is set to align-conent and the second value is set to context-content. If the second value is ignored, the first value takes effect for both attributes.

grid-auto-columns

grid-auto-rows

Specifies the size of any automatically generated grid track (also known as implicit grid track). Implicit tracks are created when there are more grid items than cells in the grid or when grid items are placed outside the explicit grid.

Value:– can be a length, percentage, or FR unit.

.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:

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

The code above creates a 2 by 2 grid.

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

We set the width of.item-b between the fifth and sixth columns, but we didn’t define those two columns. Because we are referencing non-existent rows, we create implicit tracks of width 0 to fill the gap. We can use grid-auto-columns and grid-auto-rows to specify the width of these implicit tracks:

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

grid-auto-flow

If you do not have grid items explicitly placed on the grid, the auto-place algorithm automatically places items. This property controls how the automatic placement algorithm works.

Value:

Row – Tells the auto-drop algorithm to fill each row in turn, adding new rows as needed (default)

Column – tells the automatic placement algorithm to fill in each column in turn, adding new columns as needed

Dense – tells the automatic placement algorithm to try to fill earlier free locations in the grid if smaller items appear later

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

Note that Dense only changes the visual order of projects and can cause them to be out of order, which is not conducive to accessibility.

Example:

<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

Set the grid to 5 columns and 2 rows using the following CSS and set grid-auto-flow to row (the default for this property) :

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

Then we place the item in the grid item:

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

We set grid-auto-flow: row; Our grid is shown below. Note that we did not place the 3 items (item-b, item-c, item-d) :

If we set grid-auto-flow to column, it looks like this:

.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 short form of the following attributes (including grid-template-rows, grid-template-columns, 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 properties to their initial values


– same as grid-template


/[auto-flow && dense?]

? – Sets grid-template-rows to the specified value. If the auto-flow keyword is to the right of the slash, grid-auto-flow is set to column. If an additional dense keyword is specified, the auto-place algorithm uses the dense packing algorithm. If grid-auto-columns are omitted, it is set to auto.

[ auto-flow && dense? ]

? /

– sets grid-template-columns to the specified value. If the auto-flow keyword is to the left of the slash, grid-auto-flow is set to row. If the dense keyword is specified separately, the automatic placement algorithm uses the “dense” packaging algorithm. If grid-auto-rows is omitted, it is set to auto.

Example:

The following two code blocks are equivalent:

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

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

Copy the code

The following two code blocks are also equivalent:

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

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

The following two code blocks are also equivalent:

.container {
    grid: auto-flow dense 100px / 1fr 2fr;
}
Copy the 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 also equivalent:

.container {
    grid: 100px 300px / auto-flow 200px;
}
Copy the 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 convenient syntax to set everything up at once. You can specify grid-template-areas, grid-template-rows, and grid-template-columns, and set all other child properties to their initial values. What you are doing is specifying row names and track sizes inline with their respective grid regions. Use an example to help understand:

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

The above code is equivalent to:

.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 item attributes

Note: Float, display: inline-block, display: table-cell, vertical-align, and column-* properties have no effect on the grid.

grid-column-start

gird-column-end

gird-row-strat

gird-row-end

Grid lines determine the position of grid items in the grid container. As the name implies, grid-column-start/grid-row-start determines the start edge of the grid item, grid-column-end/grid-row-end determines the end edge of the grid item.

Value:

Line – can be a number specifying grid lines or other names

Span

– The project will span the number of grid tracks provided

Span

– The item will span until it hits the next line with the name provided

Auto – Auto placement, auto and default span are both 1 by default

.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

For example:

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

Copy the code

.item-b {
  grid-column-start: 1;
  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 declared, the grid item defaults across one track.

Grid items are stacked, and you can use z-index to control the stack order.

grid-column

grid-row

Short for grid-column-start + grid-column-end and grid-row-start + grid-row-end.

Value:


/

– Each attribute receives the same value as a single one, including span

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

For example:

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

Grid items default to span a track when no end line is declared.

grid-area

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

Value:


– A name


/
/

/
– Can be a number or named row
 

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

Copy the code

For example:

Give the grid item a name:

.item-d {
  grid-area: header;
}

Copy the code

Grid-row-start + grid-column-start + grid-row-end + grid-column-end:

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

Copy the code

justify-self

Aligns grid items within a cell along the row axis. This value applies to grid items within a single cell.

Value:

Start – Aligns grid entries flush with the starting edge of the cell

End – Aligns grid items to be flush with the end edge of the cell

Center – Aligns the grid items in the center of the cell

Stretch – Fills the width of the entire cell

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

Copy the code

For example:

.item-a {
  justify-self: start;
}

Copy the code

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

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

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

To set the line-axis alignment of all grid items, you can use the grid container property context-items.

align-self

Aligns grid items in a cell along the column axis. This value applies to the contents of a single grid item.

Value:

Start – Aligns the grid entry with the top edge of the cell

End – Aligns the grid entry with the lower edge of the cell

Center – Aligns grid items with the center of the cell

Stretch – Fills the height of the entire cell

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

For example:

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

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

.item-a {
  align-self: center;
}

Copy the code

.item-a {
  align-self: stretch;
}

Copy the code

If you want to set the alignment of the column axis for all items in the grid container, you can do so with the property align-items.

place-self

Set both align-self and context-self as shorthand.

Value:

Auto – Default alignment for layout mode


/< context-self > – The first value is set to align-self and the second value is set to context-align. If the second value is missing, it applies to both attributes.

For example:

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

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

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

Methods and keywords

  • When setting row and column sizes, you can use the familiar length units, for examplepx,rem,%Etc., you can also usemin-content,max-content,autoKeywords, but most usefulfrThe unit.grid-template-columns: 200px 1fr 2fr min-content;
  • You also have the method to set the elastic unit (fr). Like setting a column1fr, but reduced to the minimum200px:grid-template-columns: 1fr minmax(200px, 1fr);
  • repeat()Function to save some characters. For example, 10 columns are the same width:grid-template-columns: repaet(10, 1fr);
  • Combining all of the above usages can be very powerful, such as:grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

summary

If you find it helpful, welcome star to my blog!

Original link:

Css-tricks.com/snippets/cs…