Fl

exbox CSSGr
ids
(
dis
play:f
lex;
) (
displ
ay:gr
id;
)

1. 1.

OR
2.
AND

HTML
<di
vid=”
wrapper
”>
HTML <di
vcl
ass
=”box”
></
div>
<di
vid=”
wrapper
”> <di
vcl
ass
=”box”
></
div>
<di
vcl
ass
=”box”
></
div> <di
vcl
ass
=”box”
></
div>
<di
vcl
ass
=”box”
></
div> <di
vcl
ass
=”box”
></
div>
<di
vcl
ass
=”box”
></
div> <di
vcl
ass
=”box”
></
div>
</
div> <di
vcl
ass
=”box”
></
div>
<di
vcl
ass
=”box”
></
div>
</
div>

CSS CSS
#wr
apper
{ #wr
apper
{
dis
play:fl
ex; di
spl
ay:gr
id;
fl
ex-dir
ecti
on:r
ow; gr
id-
templat
e-c
olumns
:1f
r1f
r1f
r;
} }

GRI
DTEMPLATEAREAS
HTML
CSS
<di
vid=”
wrapper
”>
<di
vcl
ass
=”navi
gat
ion”
></div> .
navi
gati
on{
<di
vcl
ass
=”l
eft-
col
umn”></div> gri
d-ar
ea:navi
gat
ion;
<di
vcl
ass
=”r
ight
-col
umn”
></
div> }
</
div>
.
lef
t-c
olumn{
gr
id-
area:l
eft
-col
umn;
}
3em navi
gat
ion navi
gat
ion
.
ri
ght
-col
umn{
10px gr
id-
area:r
ight
-col
umn;
}

#wr
apper
{
di
spl
ay:gr
id;
30em gr
id-
templat
e-c
olumns
:1f
r1f
r;
l
eft
-col
umn r
ight
-col
umn
gr
id-
templ
ate-
rows
:3em 30em;
gr
id-template-
areas:
“
navigationnavigat
ion”
“
left-
columnr i
ght-col
umn”
;
gap:10px;
}

Gr
id-
templ
ate-
areas-Def
inest
hel
ayoutofagr
idar
eabyr
efer
enc
ingi
temswi
thi
nwi
thagr
id(
gri
d-ar
ea)
.

Bef
oreusi
ngthe“
gri
d-templ
ate-ar
eas
”pr
oper
tyont
hepar
entwr
apper
,addt
he“
gri
d-ar
ea”pr
oper
tyt
othe
chi
l
delement
sandgivethem aname.

Onceal
lthec
hil
delementshav
eagri
d-areaname,
youcanaddthe“
gri
d-t
empl
ate-
areas
”pr
oper
tyont
he
par
entel
ementandref
erencet
hegr
idareanamestopos
iti
ont
hesei
tems.

Gap-Set
sthes
pac
ebet
weenc
olumnsandr
owsj
ustl
i
kemar
gin.

Gri
d-templat
e-c
olumns-Defi
nesthesi
zeandamountofc
olumnswi
thi
nagri
dcontai
ner
.Theamountofcolumns
i
sdetermi
nedbythenumberofval
uesaddedtot
hegri
dtemplat
ecol
umnspr
opert
y,al
ongwiths
paceinbetween
t
hev al
ues
.

POSI
TIONI
NGI
TEMS
*
bot
hfl
exandgr
idus
ethes
epr
oper
ti
es

j
ust
if
y-cont
ent
: al
ign-
cont
ent
:

fl
ex:j
usti
fy-c
ont ent:fl
ex-star
t; fl
ex:al
ign-c
ont ent:fl
ex-star
t;
gri
ds:j
usti
fy-content:star
t; gri
ds:ali
gn-content:star
t;

fl
ex:j
usti
fy-c
ont ent:center; fl
ex:al
ign-c
ont ent:center;
gri
ds:j
usti
fy-content:center; gri
ds:ali
gn-content:center;

fl
ex:j
usti
fy-c
ont ent:fl
ex-end; fl
ex:al
ign-c
ont ent:fl
ex-end;
gri
ds:j
usti
fy-content:end; gri
ds:ali
gn-content:end;