CSS

GRID

Parengė: Martynas Kašelionis

From zero to hero

Trumpai

CSS GRID išdėstymas yra pažangiausia CSS išdėstymo sistema.
Tai yra dviejų dimensijų sistema, tai reiškia, kad ji gali valdyti ir stulpelius, ir eilutes

Grid konteineris

display: grid

Blokas tampa grid konteineriu viduje esantiems child elementams (1 lygio).

<div class="container">
  <div class="item"></div> 
  <div class="item">
  	<p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Grid konteineris

Grid Line - grid linija

Jos pagalba sukuriamas tinklelis (vertikalios linijos stulpeliams ir horizontalios eilutėms.

Grid konteineris

Grid Track - grid takelis

Erdvė tarp dviejų grid linijų (stulpeliai, eilutės).

Grid konteineris

Grid cell - grid langelis

Erdvė tarp susikertančių eilutės ir stulpelio.

Grid konteineris

Grid area - grid sritis

Erdvė susidedanti iš 4 grid linijų

Konteineris

display:grid

.container {
  display: grid;
}

Konteineris

grid-template-columns
grid-template-rows

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Konteineris

grid-template-columns
grid-template-rows

Konteineris

.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];
}

Konteineris

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

Konteineris

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

fr - matavimo vienetas leidžia nustatyti grid takelio plotį, kaip laisvos vietos proporciją konteineryje.

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

Galima naudoti skirtingus matavimo vienetus

Konteineris

grid-template-areas

Apibrėžia grid šabloną, nurodydamas grid sričių pavadinimus, kurie nurodyti su grid-area ypatybe.

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.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";
}

Konteineris

grid-template-areas

Konteineris

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

grid-column-gap
grid-row-gap

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

Konteineris

.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

grid-gap

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 15px 10px;
}

Konteineris

.container {
  justify-items: start;
}

justify-items

Lygiuoja grid elementus pagal eilutės ašį

.container {
  justify-items: end;
}

Konteineris

.container {
  justify-items: center;
}

justify-items

Lygiuoja grid elementus pagal eilutės ašį eilutėje

.container {
  justify-items: stretch;
}

Konteineris

.container {
  justify-items: center;
}

justify-items

Lygiuoja grid elementus pagal eilutės ašį eilutėje

.container {
  justify-items: stretch;
}

Konteineris

.container {
  align-items: start;
}

align-items

Lygiuoja grid elementus pagal bloko ašį stulpelyje (vertikaliai)

.container {
  align-items: end;
}

Konteineris

.container {
  align-items: center;
}

align-items

Lygiuoja grid elementus pagal bloko ašį stulpelyje (vertikaliai)

.container {
  align-items: stretch;
}

Konteineris

place-items

Galima deklaruoti align-items ir justify-items vienoje eilutėje

.container {
  place-items: start auto;
}

Konteineris

justify-content

Naudojama jeigu gridas yra mažesnis už konteinerį. pvz. jeigu stulpelių pločiui nustatyti buvau naudojami px.