[[:oktatas:web:css|< CSS]] ====== CSS grid ====== * **Szerző:** Sallai András * Copyright (c) 2020, Sallai András * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== A CSS grid =====


.grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 50px 50px 50px;
    grid-gap: 30px;
}

.item {
    background-color: orange;
}

===== Az Fr mértékegység ===== A CSS Grid elrendezési lehetőséggel kaptunk egy új mértékegységet is, az Fr. Az fr a "fractional unit" rövidítése, ami töredék résznek fordítható. 1fr a rendelkezésre álló résznek az egyszerese. Az fr-t a grid-template-columns tulajdonságnál szokás használni, például:


.valami {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /*...*/
}

===== Újabb grid =====


.grid {
    display: grid;
    grid-template-columns: 100px  50px auto 50px;
    grid-template-rows: 100px 20% 100px;
}

.grid div {
    background-color: orange;
    border: 1px solid navy;
}

===== Elnevezések ===== A vonalakat elnevezhetjük tetszőleges néven.


.doboz {
    grid-template-columns: [first-line] 100px [line2] 100px [line3] auto [line4] 100px [end];
    grid-template-rows: [first-rline] 100px [second-rline] 50% [third-line] 50px [last-line];
}

{{:oktatas:web:css:grid_elnevezett_vonalak.png|}} Egy vonalnak egynél több neve is lehet.


.doboz {
    grid-template-columns: [col1-start] 100px [col1-end col2-start] 100px [col2-end];
}

===== Ismétlés ===== Több vonalnak is lehet egyező neve. Ezért, használhatjuk a repeat() függvényt:


.doboz {
    grid-template-columns: [first-col] repeat(3, 50px [col-start]);
}

Olyan mintha ezt írtam volna:


.doboz {
    grid-template-columns: [first-col] 50px [col-start] 50px [col-start] 50px [col-start];
}

Ha ilyenkor szeretnénk hivatkozni egyik vonalra, adjuk meg a sorszámát. Például:


.item {
    grid-column-start: col-start 1;
}

===== Grid area =====


.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 200px 100px;
    grid-template-areas:
        "header header2 . side"
        "main main2 . side"
        "footer footer footer footer";
}

.item {
    background-color: orange;
    border: 2px solid navy;
}

.item4, .item8 {
    grid-area: side
}

.item9, .item10, .item11, .item12 {
    grid-area: footer;
}

===== Cellák közötti rés ==== A cellák közötti rést szabványosan a column-gap és a row-gap tulajdonságokkal állíthatjuk. Régebben a grid-column-gap és grid-row-gap tulajdonságokat használhattuk.


.doboz {
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    column-gap: 20px;
    row-gap: 10px;
}

{{:oktatas:web:css:grid_gap.png|}} A rések az oszlopok és sorok között jönnek létre. A rács körül nem lesz rés. ==== Gap ==== A gap tulajdonsággal, megadható egyszerre oszlopok és sorok közötti rés.


.doboz {
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    gap: 10px 20px;
}

Elő paraméter sor, második az oszlop: gap: A szabványos gap-nak is van régi verziója: grid-gap. A **grid-** előtag **elavult**, ne használjuk. ===== A justify-items ===== Nem minden rendszer ismeri. A w3schools.com weboldalon nem szerepel, az atom.io kódszerkesztő nem ismeri. A justify-items a sor tengely mentén igazít, ellentétben az align-items tulajdonsággal, amely oszlopok tengelye mentén igazít. Lehetséges értékei: | stretch | Alapértelmezés. Nyújtás | | start | Igazítás a kezdő szélhez. | | end | Igazítás a vég szélhez. | | center | Igazítás középre. |


.doboz {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    border: 1px solid red;
    justify-items: stretch;

}

.doboz div {
    background-color: orange;
    border: 1px solid navy;
}

Kezdethez igazítás:

Végéhez igazítás:

Középre igazítás:


.doboz {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    border: 1px solid red;
    align-items: stretch;

}

.doboz div {
    background-color: orange;
    border: 1px solid navy;
}

Kezdethez igazítás:

Végéhez igazítás:

Középre igazítás:

===== A place-items ===== A place-items egyszerre állítja az előző két tulajdonságot: * justify-items * align-items Megadható 1 vagy 2 érték.


place-items  /



  a
  b
  c
  d
  e
  f
  g
  h
  i


.doboz {
    dispaly: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    border: 1px solid red;
    justify-content: stretch;
}
.doboz div {
    background-color: orange;
    border: 1px solid navy;
}

Beállítás: stretch:


grid-template-columns: 1fr 1fr 1fr;

Beállítás: start:

Beállítás: end:

Beállítás: center:

Beállítás: space-around:

Beállítás: space-between:

Beállítás: space-evenly:



  a
  b
  c
  d
  e
  f
  g
  h
  i


.doboz {
    dispaly: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    border: 1px solid red;
    align-content: stretch;
}
.doboz div {
    background-color: orange;
    border: 1px solid navy;
}

Beállítás: stretch:


grid-template-columns: 1fr 1fr 1fr;

Beállítás: start:

Beállítás: end:

Beállítás: center:

Beállítás: space-around:

Beállítás: space-between:

Beállítás: space-evenly:

===== A place-content ===== A place-content egyszerre állítja az előző két tulajdonságot: * justify-content * align-content Megadható 1 vagy 2 érték.


place-content  /

Ha csak egy értéket adunk meg, akkor mindkét tulajdonsághoz azonos érték lesz beállítva. ===== A grid-auto ===== Alapértelmezett méret beállítására használható a grid-auto-columns és a grid-auto-rows.


.doboz {
    display: grid;
    grid-auto-columns: 50px 50px;
    grid-auto-rows: 70px 70px;
}
.doboz .item1 { grid-area: 1/1/2/2; }
.doboz .item1 { grid-area: 1/2/2/3; }
.doboz .item1 { grid-area: 2/1/3/2; }
.doboz .item1 { grid-area: 2/2/3/3; }

A grid-auto-columns és a grid-auto-rows a grid-area mellett használható. A grid-area a következő módon paraméterezhető:


grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

===== Linkek ===== * https://www.w3schools.com/cssref/pr_grid.asp (2020) * https://css-tricks.com/snippets/css/complete-guide-grid/ (2020) * https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items (2020) * https://www.digitalocean.com/community/tutorials/css-align-justify (2020) * https://tailwindcss.com/docs/justify-items (2020) * https://www.quackit.com/css/css3/properties/css_justify-items.cfm (2020)