CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Grid Layout

CSS Grid Layout introduces a two-dimensional grid system to CSS.

Grids can be used to layout major page areas or small user interface elements.

1
2
3
4
5
6
7
8
9

The CSS grid system is similar to tables when it comes to laying out elements. However, it is much more powerful and flexible.

A grid is an intersecting set of horizontal and vertical lines – one set defining columns and the other rows.

Elements can be placed onto the grid, respecting these column and row lines.


CSS Grid Layout

To start using the Grid layout, you need to define two things:

  1. Grid Container (Parent)
  2. Grid Items (Direct Child)

Creating Grid Container (Parent)

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 will become grid items:

1
2
3

The element above represents a grid container (the green area) with three grid items.

Run code

The grid container properties are:


The grid-template-columns Property

The grid-template-columns property specifies the number and the width of columns in a grid container.

The values are a space separated list, where each value specifies the width of the respective column.

1
2
3
4
5
6
Run code

In the following example the grid container has 3 equal size columns:

Run code

The grid-template-rows Property

The grid-template-rows property specifies the number and the height of rows in a grid container.

The values are a space separated list, where each value specifies the height of the respective row.

1
2
3
4
5
6
Run code

The grid-template Property

The grid-template property is a shorthand that sets the following properties in a single declaration:

Run code

The grid-auto-flow Property

The grid-auto-flow property specifies how auto-placed items get flowed into the grid container.

Run code

The grid Property

The grid property is a shorthand that sets the following properties in a single declaration:

Run code

The grid property is a shorthand for all grid container properties.


The grid-row-gap Property

The grid-row-gap property sets the size of the gap (gutter) between the rows in a grid layout.

1
2
3
4
5
6
Run code

The grid-column-gap Property

The grid-column-gap property sets the size of the gap (gutter) between the columns in a grid layout.

1
2
3
4
5
6
Run code

The grid-gap Property

The grid-gap property is a shorthand property for setting both the grid-row-gap and grid-column-gap properties.

1
2
3
4
5
6
Run code

Grid Items (Child)

The direct child elements of a grid container are called grid items:

1
2
3

The element above represents three grid items (lightgreen) inside a grid container (green).

The grid items properties are:


The grid-row-start Property

The grid-row-start property specifies a grid item’s start position within the grid row.

1
2
3
4
5
6
7
Run code

The grid-column-start Property

The grid-column-start property specifies a grid item’s start position within the grid column.

1
2
3
4
5
6
7
Run code

The grid-row-end Property

The grid-row-end property specifies a grid item’s end position within the grid row.

1
2
3
4
5
6
7
8
9
Run code

The keyword span specifies how many rows the item will span.


The grid-column-end Property

The grid-column-end property specifies a grid item’s end position within the grid column.

1
2
3
4
5
6
7
Run code

The keyword span specifies how many columns the item will span.


The grid-area Property

The grid-area property is a shorthand that sets the following properties in a single declaration:

Run code

Grid vs 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.


More Examples

Create responsive website template using grid layout:

Run code

Create basic Calendar using grid layout:


CSS Grid Functions

Function Description
repeat(n, w) Allow a large number of columns that exhibit a recurring pattern to be written in a more compact form

CSS Grid Properties

Property Description
grid A shorthand property for all grid container properties
grid-area Specifies a grid item's size and location in a grid container
grid-auto-columns Specifies the size for the columns in a grid container
grid-auto-flow Specifies how auto-placed items get flowed into the grid container
grid-auto-rows Specifies the size for the rows in a grid container
grid-column Specifies a grid item's size and location in a grid column
grid-column-end Specifies a grid item’s end position within the grid column
grid-column-gap Sets the size of the gap (gutter) between the columns in a grid layout
grid-column-start Specifies a grid item’s start position within the grid column
grid-gap Sets the size of the gap (gutter) between rows and columns in a grid layout
grid-row Specifies a grid item's size and location in a grid row
grid-row-end Specifies a grid item’s end position within the grid row
grid-row-gap Sets the size of the gap (gutter) between the rows in a grid layout
grid-row-start Specifies a grid item’s start position within the grid row
grid-template-areas Specifies named grid areas
grid-template-columns Specifies the number and the width of columns in a grid container
grid-template-rows Specifies the number and the height of rows in a grid container
grid-template A shorthand property for grid-template-rows, grid-template-columns and grid-template-areas