Grid Layout (propriétés)

Les bases du principe de grille de 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
Header

Main article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, provident tempore odio quas totam reiciendis quis numquam repellendus nisi nemo.

Minima, pariatur, architecto natus provident voluptatibus deleniti odio quae perferendis commodi vero alias debitis odit facilis distinctio necessitatibus dicta autem.

Footer
Header

Main article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, provident tempore odio quas totam reiciendis quis numquam repellendus nisi nemo.

Minima, pariatur, architecto natus provident voluptatibus deleniti odio quae perferendis commodi vero alias debitis odit facilis distinctio necessitatibus dicta autem.

Footer
Header

Main article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, provident tempore odio quas totam reiciendis quis numquam repellendus nisi nemo.

Minima, pariatur, architecto natus provident voluptatibus deleniti odio quae perferendis commodi vero alias debitis odit facilis distinctio necessitatibus dicta autem.

Footer
Header

Main article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, provident tempore odio quas totam reiciendis quis numquam repellendus nisi nemo.

Minima, pariatur, architecto natus provident voluptatibus deleniti odio quae perferendis commodi vero alias debitis odit facilis distinctio necessitatibus dicta autem.