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. Eos sequi labore quas atque quisquam earum dolorum nobis! Vitae, modi, exercitationem vel earum veniam cum culpa tempora nesciunt eaque cupiditate sapiente.

Pariatur, animi, necessitatibus, magnam placeat nam doloribus temporibus sequi sit quam impedit corrupti veniam error culpa et praesentium atque veritatis libero fugit architecto quaerat distinctio assumenda laboriosam fugiat saepe obcaecati!

Sidebar

Footer

Grid items alt

Header

Main article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, recusandae harum eaque aut libero facere laudantium pariatur nemo deserunt consectetur laboriosam blanditiis quis ad doloremque quisquam asperiores eum tenetur facilis!

Id, beatae, est, dolorum, doloremque saepe officiis temporibus dolor laborum cupiditate ullam nostrum asperiores deleniti animi cum eligendi. Totam, quia exercitationem inventore error nostrum voluptas veritatis pariatur aliquam eveniet perferendis.

Sidebar

Footer

Grid areas

Header

Main article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, cumque reprehenderit provident error ut vero ea unde enim quaerat velit quisquam dolorum beatae officia saepe quasi natus nemo et excepturi.

Quisquam, totam, expedita, at ea porro ullam saepe voluptatum temporibus id et a doloribus laborum accusamus perspiciatis quidem dignissimos architecto ad maiores maxime nesciunt dolores quis possimus dolorem ipsam eum.

Sidebar

Footer

Grid areas alt

Header

Main article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, dolores, adipisci, atque aut aliquid id sapiente tenetur eaque eveniet similique aperiam vitae qui. Eius, sunt, minus nulla sequi quidem fugiat!

Rem, modi, eaque pariatur minima ab voluptates et magni beatae nulla corporis laborum vero. Unde, aliquam, saepe, aut, illum odit delectus animi nemo alias sit quae nihil aliquid molestias autem.

Sidebar

Footer