Wyszukaj / o blogu

Grid przy pomocy HTML i klas oraz Grid:CSS

Opublikowano pon 15 czerwca 2020 w css • 4 min read

grid

Grid -> HTML + klasy CSS

Grid przy pomocy klas (starsza wersja) jest czym innym niż tzw. Grid CSS (nowsza wersja rozwiązania)

W przypadku rozwiązania opartego jedynie o HTML i odpowiednio stylowane klasy css - całość oparta jest na kolumnach (pion) oraz wiersze(poziom)

Kolumna ustala szerokość a wiersz "trzyma" elementy w jednej linii

Wiersze zawsze nazywają się row i zadaniem wiersza jest ustawienie kolumn

Warunek 1 -> box-sizing

Aby elementy były zawarte w jednej linii box-sizing musi być ustawiony na bored-box

Warunek 2 -> float lub flex-box

Należy zastosować clearfix na elementach zawartych w rzędzie jeśli całość oparta jest o float

Clearfix jest sposobem na ujarzmienie problemu z pojemnikami o zerowej wysokości -> elementów pływających

Patrz: Co to jest clearfix?

Alternatywnie zagnieżdżenie wewnątrz jednego rzędu oprzeć można na flex-box

Warunek 3 -> klasy kolumn

Należy stworzyć klasy, które wskazując na szerokość kolumn i je odpowiednio używać np. jeśli całość ma być szeroka na 12 kolumn to jedna kolumna wynosi 100%/12, zatem obiekt zajmująca połowę rodzica w poziomie składać się będzie z 6 kolumn i winien być oznaczony col-6 poniższy mixin to dobrze obrazuje

@mixin grid($cols) {
  display: flex; /* rozwiązanie oparte o flex-box */
  [class*="col-"] {
    // float: left; /* rozwiązanie oparte o float */
    min-height: 1px;
  }
  @for $i from 1 through $cols {
    .col-#{$i} {
      width: (100% / $cols) * $i;
    }
  }
}

Wynik (przykładowy fragment kodu wynikowego css):

/* line 33, scss/main.scss */
.container .row .col-6 {
  width: 50%;
}

/* line 33, scss/main.scss */
.container .row .col-7 {
  width: 58.33333%;
}

/* line 33, scss/main.scss */
.container .row .col-8 {
  width: 66.66667%;
}

Warunek 4 -> wiersz

Należy odpowiednio przygotować stylizację wiersza/row

$gutter: 10px; /* przestrzeń pomiędzy kolumnami */

.container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  .row {
    // @extend %clearfix; /* rozwiązanie oparte o float */
    height: 60vh; /* tu można podstawić dowolną wartość */
    [class*="col-"] {
      // float: left; /* rozwiązanie oparte o float */
      min-width: 1px;
      padding-left: $gutter;
      padding-right: $gutter;
    }
    @include grid(12);
  }
}

Warunek 5 -> HTML

Przygotowanie kolumn w pojedynczym wierszu tak aby zajmowały nie więcej niż 100% z ilości kolumn

  <main>
    <div class="container">
      <div class="row">
        <div class="col-3">
          <div class="box">col-3</div>
          <div class="box">col-3</div>
          <div class="box">col-3</div>
          <div class="box">col-3</div>
        </div>
        <div class="col-6">
          <div class="box">col-6</div>
        </div>
        <div class="col-3">
          <div class="box">col-3</div>
        </div>
      </div>
    </div>
  </main>
  <footer>
    <div class="row">
      <div class="col-12">
        <div class="box">Footer</div>
      </div>
    </div>
  </footer>

Responsywność

W tym przypadku responsywność jest oparta o dodanie dodatkowych klas, które są aktywowane w przypadku spełnienia określonego warunku w media-query

<div class="row">
    <div class="col-sm-2 col-md-4">
      <div class="box">1</div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="box">2</div>
    </div>
</div>

col-lg-*// large - duży ekran ≥ 1200px

col-md-* // medium - desktop ≥ 992px

col-sm-* // small - tablet ≥ 768px

col-xs-* w przypadku bootstrapu jest to odpowiednik col-*// extra small - telefon < 768 px

@mixin z media query

@mixin grid($cols) {
  @media screen and (max-width: 768px) {
    display: flex;
    @for $i from 1 through $cols {
      .col-sm-#{$i} {
        flex: 0 0 (100% / $cols) * $i;
      }
    }
  }
  @media screen and (min-width: 767px) {
    @for $i from 1 through $cols {
      .col-md-#{$i} {
        flex: 0 0 (100% / $cols) * $i;
      }
    }
  }
}

Patrz: Bootstrap-Grid system

Budowanie siatki w sposób responsywny nie jest proste więc wykorzystuje się często już przygotowane wcześniej layouty

Przykłady układu Grid

Grid w CSS na 100%

Nie wymaga zaangażowania struktury HTML

<div class="grid-container">
  <header>Nagłówek</header>
  <aside>Pasek boczny</aside>
  <main>Główna treść</main>
  <footer>Stopka</footer>
</div>

Grid wprowadza jednostkę fr (fraction -> ułamek) i na niej opiera podział i pozwala to budować grid oparty o dwa istotne wyrażenia dla kolumn - grid-template-columns i wierszy - grid-template-rows

grid-template-columns: 1fr 1fr; -> 2 kolumny, gdzie każda zajmuje jeden ułamek

grid-template-columns: 2fr 1fr; 2 kolumny, gdzie 1 zajmuje dwa ułamki a druga jeden

grid-template-columns: 200px 1fr 300px; // 200px auto 300px

grid-template-rows: 200px 1fr; // pierwszy wiersz ma 200px a kolejny dostosowuje się automatycznie

=========

grid-template-areas

grid-template-areas - pozwala na wyznaczenie obszarów i rozmieszczenie elementów według określonego wzoru

.grid-container {
  display: grid;
  grid-template-columns: 300px 1fr; // dwie kolumny
  grid-template-rows: 100px 1fr 200px;
  grid-template-areas: // wskazanie układu
  "header header" // dwie kolumny 1 rząd
  "sidebar main" // 2 rząd - część na sidebar (300px) a część na main (1fr/auto)
}


aside {
  padding: 20px;
  background-color: orangered;
  grid-area: header;
}

aside {
  padding: 20px;
  background-color: orangered;
  grid-area: sidebar;
}

====

grid-column-start: 2 // od której kolumny ma się układać element

grid-column-end: 4 // na której kolumnie ma się kończyć

grid-column: 2/4 // skrócony zapis

grid-row-start: 2 // od którego rzędu ma się układać element

grid-row-end: 4 // na którym rzędzie ma się kończyć

grid-row: 2/4 // skrócony zapis

Przykład zastosowania index.html

<div class="grid-container">
  <div class="Header"></div>
  <div class="aside">
    <div class="aside-1"></div>
    <div class="aside-2"></div>
  </div>
  <div class="main"></div>
</div>

style.css

html, body, .grid-container { height: 100%; margin: 0; }

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: "Header Header Header Header" "aside main main main" "aside main main main";
}

.Header { grid-area: Header; }

.aside {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: "aside-1 aside-1 aside-1" "aside-2 aside-2 aside-2";
  grid-area: aside;
}

.aside-1 { grid-area: aside-1; }

.aside-2 { grid-area: aside-2; }

.main { grid-area: main; }

See the Pen Grid-tampleate-example by Mikołaj Kostyrko (@mkostyrko) on CodePen.

====

grid-gap: 10px; // odstęp pomiędzy kafelkami (kolumnami i rzędami)

grid-column-gap: // odstęp pomiędzy kolumnami

grid-row-gap: // odstęp pomiędzy rzędami

==== Pozycjonowanie dzieci

align-item start/end/center/stretch

grid-column-start | | span | span | auto;

grid-column-end | | span | span | auto;

grid-row-start | | span | span | auto;

grid-row-end | | span | span | auto;

grid-area schemat / / /

====

Pozycjonowanie siebie justify-self` start/end/center/stretch

justyfie-self

align-self start/end/center/stretch

align-self

place-self - schemat / domyślnie auto ale można np. center

place-self

Patrz więcej A Complete Guide to Grid

====

Media query

.grid-container {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr 1fr;
  @media screen and (min-width: 800px) {
    grid-template-columns: repeat(3, 1fr);
  }
  @media screen and (min-width: 1000px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

Generatory układu Grid w CSS

Wydajność?

A może by tak... flexbox + grid? -> Grid for layout, Flexbox for components

Grid-CSS jest relatywnie nowym dodatkiem w świecie CSS i wciąż charakteryzuje się niską wydajnością (źródło), a do tego nie wszystkie przeglądarki mogą z nim funkcjonować patrz tutaj

Źródła

https://getbootstrap.com/docs/4.0/layout/grid/

https://www.w3schools.com/css/css_grid.asp

css grid layout rwd

Zobacz także