display

grid

inline-grid

subgrid

grid-column-gap

grid-row-gap

grid-gap

50px

grid-template-columns

30%

30% 20% 50%

1fr

1fr 2fr 1fr

repeat(3, 1fr)

auto auto auto auto;

80px 200px auto 40px;

grid-template-rows

repeat(3, 200px)

repeat(3, minmax(200px, auto));

grid-auto-rows: minmax(200px, auto);

200px auto;

200px auto;

justify-content

space-evenly;

space-around;

space-between;

center

start

end

align-content

space-evenly

space-around

space-between

start

center

end

align-items

justify-items

start

center

end

grid-column-start

grid-column-end

1, 3

grid-column

1 / 5;

1 / span 3;

2 / span 3;

grid-row-start

grid-row-end

1, 3

grid-row

1 / 4;

1 / span 2;

grid-area:

1 / 2 / 5 / 6;

2 / 1 / span 2 / span 3;

grid-area:

needArea

Separet by name

.item1 { grid-area: header; }

.item2 { grid-area: menu; }

.item3 { grid-area: main; }

.item4 { grid-area: right; }

.item5 { grid-area: footer; }

grid-template-areas:

'needArea needArea needArea needArea needArea';

'needArea needArea . . .';

'needArea needArea . . .' 'needArea needArea . . .';

'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';

The Order of the Items

.item1 { grid-area: 1 / 3 / 2 / 4; }

.item2 { grid-area: 2 / 3 / 3 / 4; }

.item3 { grid-area: 1 / 1 / 2 / 2; }

.item4 { grid-area: 1 / 2 / 2 / 3; }

.item5 { grid-area: 2 / 1 / 3 / 2; }

.item6 { grid-area: 2 / 2 / 3 / 3; }

Responsive types

@media only screen and (max-width: 500px) {

.item1 { grid-area: 1 / span 3 / 2 / 4; }

.item2 { grid-area: 3 / 3 / 3 / 4; }

.item3 { grid-area: 2 / 1 / 2 / 2; }

.item4 { grid-area: 2 / 2 / span 2 / 3; }

.item5 { grid-area: 3 / 1 / 3 / 2; }

.item6 { grid-area: 2 / 3 / 2 / 4; }

align-self

justify-self

center

start

end