Frontend jegyzetSearch...
Grid
css
.container{
display:grid;
}
Szerkezet kialakítása
css
.container {
grid-template-columns: 40px 50px auto 50px 40px ;
grid-template-rows: 25% 100px auto ;
}
Elnevezett sorok/oszlopok
css
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
Területek
css
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
Sor/Oszlop közök
A közök megadásánál először a sorok, majd pedig az oszlopok közötti távolságot adjuk meg.
css
.container{
gap: 15px 10px;
row-gap: 15px;
column-gap: 10px;
}
\pagebreak
Elrendezések
Hasonló a sor elrendezésű flexbox-hoz
Align-items
A cellában levő elemek függőleges igazítása
start
center
end
stretch
Align-content
A belső rácsszerkezet függőleges igazítása a container-hez képest
start
center
end
space-between
space-around
stretch
Justify-items
A cellában levő elemek vízszintes igazítása
start
center
end
stretch
Justify-content
A belső rácsszerkezet vízszintes igazítása a container-hez képest
start
center
end
space-between
space-around
stretch
Grid elemek
Elhelyezés
Sorban
css
.item-1{
grid-row-start: 1;
grid-row-end: 2;
grid-row: 1/2; /* start/end */
grid-row: elso-sor/masodik-sor;
grid-row: 1/ span 3; /* span azt jelzi, hogy hany darab soron at tartson */
}
Oszlopban
css
.item-1{
grid-column-start: 1;
grid-column-end: 2;
grid-column: 1/2; /* start/end */
grid-column: elso-sor/masodik-sor;
grid-column: 1/ span 3; /* span azt jelzi, hogy hany darab oszlopon at tartson */
}
Példa a sor/oszlop alapú elhelyezésre
css
.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start;
grid-row-end: 3;
}
css
.item-b {
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2;
grid-row-end: span 2;
}
css
.item-c {
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
Területen
css
.item-d {
grid-area: header;
grid-area: 1 / col4-start / last-line / 6; /* row-start / column-start / row-end / column-end*/
}
Align-self
Függőlegesen helyezi el az adott elemet
start
center
end
stretch
Justify-self
Vízszintesen helyezi el az adott elemet
start
center
end
stretch
Függvények
minmax()
Megadhatjuk vele, hogy az adott sor/oszlop minimum mekkora és maximum mekkora lehet
css
grid-template-columns: minmax(100px, 1fr) 3fr;
repeat()
Ha több azonos méretű sort/oszlopot akarunk definiálni, célszerű ezt a függvényt, használni.
Először megadjuk neki, hogy hány darabot, majd, hogy mekkora legyen az adott sor/oszlop.
css
grid-template-columns:
1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
/* egyszerubb megoldas: */
grid-template-columns:
repeat(8, 1fr);
Ellenőrző kérdések
\pagebreak