Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kursy /Frontend SELF PL /Responsywne siatki

Responsywne siatki

Frontend SELF PL
Poziom 25 , Lekcja 2
Dostępny

3.1 Flexbox

Tworzenie elastycznych układów za pomocą Flexbox i Grid to kluczowa technika przy tworzeniu nowoczesnych responsywnych stron internetowych. Te technologie ułatwiają zarządzanie rozmieszczeniem elementów na stronie, zapewniając ich dostosowanie do różnych rozmiarów ekranów i urządzeń.

Flexbox (Flexible Box Layout Module) jest przeznaczony do jednowymiarowego rozmieszczania elementów (albo w wierszach, albo w kolumnach). Flexbox upraszcza tworzenie elastycznych i responsywnych układów.

Podstawowe koncepcje Flexbox:

  • Flex-kontener: element, do którego zastosowano właściwość display: flex
  • Flex-elementy: elementy podrzędne flex-kontenera, które są wewnątrz niego rozmieszczone

Właściwości Flexbox

Flex-kontener:

  • display: flex: określa element jako flex-kontener
  • flex-direction: ustawia kierunek ułożenia flex-elementów (row, column, row-reverse, column-reverse)
  • justify-content: zarządza wyrównaniem flex-elementów względem głównej osi (flex-start, flex-end, center, space-between, space-around)
  • align-items: zarządza wyrównaniem flex-elementów względem osi poprzecznej (stretch, flex-start, flex-end, center, baseline)
Java university

Flex-elementy:

  • flex-grow: określa, czy element ma się powiększać, gdy jest wolne miejsce
  • flex-shrink: określa, czy element ma się pomniejszać, gdy brakuje miejsca
  • flex-basis: ustawia początkowy rozmiar elementu przed rozdysponowaniem wolnego miejsca
  • align-self: nadpisuje wyrównanie elementu względem osi poprzecznej, ustawione w align-items

Przykład użycia Flexbox

Stworzymy układ z trzema kolumnami, który dostosuje się do różnych rozmiarów ekranu:

HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Przykład Flexbox</title>
          <style>
            .flex-container {
              display: flex;
              justify-content: space-between;
              align-items: stretch;
              flex-wrap: wrap;
            }

            .flex-item {
              flex: 1 1 200px;
              margin: 10px;
              padding: 20px;
              background-color: #f4f4f4;
              text-align: center;
            }
          </style>
        </head>
        <body>
          <div class="flex-container">
            <div class="flex-item">Kolumna 1</div>
            <div class="flex-item">Kolumna 2</div>
            <div class="flex-item">Kolumna 3</div>
          </div>
        </body>
      </html>

Wyjaśnienie kodu:

  • .flex-container: określa kontener jako flex-kontener, wyrównuje elementy z równymi odstępami między nimi i pozwala elementom przenosić się do kolejnego wiersza, gdy brakuje miejsca
  • .flex-item: flex-elementy, które zajmują równą przestrzeń, mają minimalną szerokość 200px i równomiernie rozmieszczone wewnątrz kontenera

3.2 CSS Grid

CSS Grid Layout to dwuwymiarowy system układania, który pozwala na tworzenie skomplikowanych układów z użyciem wierszy i kolumn.

Podstawowe koncepcje CSS Grid:

  • Grid-kontener: element, do którego zastosowano właściwość display: grid
  • Grid-elementy: elementy podrzędne grid-kontenera, które są rozmieszczone w siatce

Właściwości CSS Grid

Grid-kontener:

  • display: grid: określa element jako grid-kontener
  • grid-template-columns: ustawia liczbę i rozmiary kolumn w siatce
  • grid-template-rows: ustawia liczbę i rozmiary wierszy w siatce
  • gap: zarządza odstępami między wierszami i kolumnami
  • justify-items: zarządza poziomym wyrównaniem grid-elementów
  • align-items: zarządza pionowym wyrównaniem grid-elementów

    Grid-elementy:

  • grid-column: określa, na ile kolumn element się rozciąga
  • grid-row: określa, na ile wierszy element się rozciąga
  • justify-self: nadpisuje poziome wyrównanie elementu
  • align-self: nadpisuje pionowe wyrównanie elementu

Przykład użycia CSS Grid

Stworzymy układ z trzema kolumnami i dwoma wierszami, który dostosuje się do różnych rozmiarów ekranu.

HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Przykład CSS Grid</title>
          <style>
            .grid-container {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-template-rows: repeat(2, 1fr);
              gap: 10px;
            }

            .grid-item {
              padding: 20px;
              background-color: #e4e4e4;
              text-align: center;
            }
          </style>
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item">Element 1</div>
            <div class="grid-item">Element 2</div>
            <div class="grid-item">Element 3</div>
            <div class="grid-item">Element 4</div>
            <div class="grid-item">Element 5</div>
            <div class="grid-item">Element 6</div>
          </div>
        </body>
      </html>

Wyjaśnienie kodu:

  • .grid-container: określa kontener jako grid-kontener z trzema kolumnami i dwoma wierszami, każdy element zajmuje równą przestrzeń
  • .grid-item: grid-elementy z równymi odstępami i tłem
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION