Grid Layout (propriétés)

Les principales propriétés de CSS Grid Layout

Simple

Item 1
Item 2
Item 3
Item 4

Simple alt

Item 1
Item 2
Item 3
Item 4

Repeat avec 12 cases

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Gap

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Gap alt

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Justify-items: center

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Justify-items: start

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Justify-items: end

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Align-items: center

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Align-items: start

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Align-items: end

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Align-items: stretch

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Justify-content: center

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Justify-content: start

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Justify-content: end

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Justify-content: between

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Justify-content: around

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Align-content: center

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Align-content: start

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Align-content: end

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Align-content: space-between

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Align-content: space-around

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Align-content: space-evenly

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Grid items

Header

Main article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum excepturi corporis dolor nam. Ex, unde at inventore ipsa soluta earum obcaecati voluptas sequi odio vero sapiente totam voluptatum architecto suscipit.

Illum, quidem, harum enim odit voluptates ipsam ab doloremque ratione dicta voluptatem iure laborum sed aspernatur nulla sequi ipsa itaque mollitia beatae nostrum soluta. Corporis maxime quam architecto quod eum.

Sidebar

Footer

Grid items alt

Header

Main article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum excepturi corporis dolor nam. Ex, unde at inventore ipsa soluta earum obcaecati voluptas sequi odio vero sapiente totam voluptatum architecto suscipit.

Illum, quidem, harum enim odit voluptates ipsam ab doloremque ratione dicta voluptatem iure laborum sed aspernatur nulla sequi ipsa itaque mollitia beatae nostrum soluta. Corporis maxime quam architecto quod eum.

Sidebar

Footer

Grid areas

Header

Main article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum excepturi corporis dolor nam. Ex, unde at inventore ipsa soluta earum obcaecati voluptas sequi odio vero sapiente totam voluptatum architecto suscipit.

Illum, quidem, harum enim odit voluptates ipsam ab doloremque ratione dicta voluptatem iure laborum sed aspernatur nulla sequi ipsa itaque mollitia beatae nostrum soluta. Corporis maxime quam architecto quod eum.

Sidebar

Footer

Grid areas alt

Header

Main article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum excepturi corporis dolor nam. Ex, unde at inventore ipsa soluta earum obcaecati voluptas sequi odio vero sapiente totam voluptatum architecto suscipit.

Illum, quidem, harum enim odit voluptates ipsam ab doloremque ratione dicta voluptatem iure laborum sed aspernatur nulla sequi ipsa itaque mollitia beatae nostrum soluta. Corporis maxime quam architecto quod eum.

Sidebar

Footer