Scribd
Upload
69 views1 page

GRI D Template Areas: FL Exbox CSS GR I Ds

The document compares using Flexbox and CSS Grids to lay out page content. It shows how Flexbox uses the "flex" display property to lay out items in a row, while CSS Grid uses the "grid" display property and the grid-template-columns property to define a grid with multiple columns. An example is given laying out navigation, left, and right columns using CSS Grid areas and the grid-area property to assign elements to areas.

Uploaded by

Баже Сутинов
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
69 views1 page

GRI D Template Areas: FL Exbox CSS GR I Ds

The document compares using Flexbox and CSS Grids to lay out page content. It shows how Flexbox uses the "flex" display property to lay out items in a row, while CSS Grid uses the "grid" display property and the grid-template-columns property to define a grid with multiple columns. An example is given laying out navigation, left, and right columns using CSS Grid areas and the grid-area property to assign elements to areas.

Uploaded by

Баже Сутинов
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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;

You might also like