CodeGym/Kursy/Frontend SELF PL/Rozmieszczenie elementów

Rozmieszczenie elementów

Dostępny

4.1 Właściwość grid-column

CSS Grid Layout oferuje świetne narzędzia do zarządzania rozmieszczeniem elementów w siatce. Jednymi z głównych narzędzi są właściwości grid-row i grid-column. Te właściwości pozwalają programistom dokładnie określać, które wiersze i kolumny mają zajmować grid-elementy, zapewniając elastyczność i kontrolę nad układem.

Właściwość grid-column określa, które kolumny będzie zajmować element w grid-kontenerze.

Składnia:

.grid-item {
  grid-column: start / end;
}

Gdzie:

  • start: linia początkowa siatki
  • end: linia końcowa siatki

Przykład 1: Umieszczenie elementu w konkretnej kolumnie

W tym przykładzie element będzie umiejscowiony między drugą a trzecią linią siatki, zajmując drugą kolumnę:

CSS
.grid-item {
  grid-column: 2 / 3; /* Element zajmuje przestrzeń między drugą a trzecią linią siatki */
}

Przykład 2: Element zajmujący kilka kolumn

W tym przykładzie element będzie zajmować trzy kolumny, zaczynając od pierwszej linii i kończąc na czwartej linii siatki:

CSS
.grid-item {
  grid-column: 1 / 4; /* Element zajmuje przestrzeń od pierwszej do czwartej linii siatki */
}

Przykład 3: Użycie span do objęcia kilku kolumn

W tym przykładzie element będzie zajmować dwie kolumny, zaczynając od bieżącej pozycji:

CSS
.grid-item {
  grid-column: span 2; /* Element zajmuje dwie kolumny, zaczynając od bieżącej pozycji */
}

4.2 Właściwość grid-row

Właściwość grid-row określa, które wiersze będzie zajmować element w grid-kontenerze.

Składnia:

.grid-item {
  grid-row: start / end;
}

Gdzie:

  • start: linia początkowa siatki
  • end: linia końcowa siatki

Przykład 1: Umieszczenie elementu w konkretnej linii

W tym przykładzie element będzie umiejscowiony między pierwszą a drugą linią siatki, zajmując pierwszy wiersz:

CSS
.grid-item {
  grid-row: 1 / 2; /* Element zajmuje przestrzeń między pierwszą a drugą linią siatki */
}

Przykład 2: Element zajmujący kilka wierszy

W tym przykładzie element będzie zajmować dwa wiersze, zaczynając od drugiej linii i kończąc na czwartej linii siatki:

CSS
.grid-item {
  grid-row: 2 / 4; /* Element zajmuje przestrzeń od drugiej do czwartej linii siatki */
}

Przykład 3: Użycie span do objęcia kilku wierszy

W tym przykładzie element będzie zajmować trzy wiersze, zaczynając od bieżącej pozycji:

CSS
.grid-item {
  grid-row: span 3; /* Element zajmuje trzy wiersze, zaczynając od bieżącej pozycji */
}

Przykład 4. Użycie wartości ujemnych

CSS
.element {
  grid-row: 1 / -1; /* Element zaczyna się na pierwszej linii i kończy na ostatniej */
}

4.3 Łączenie właściwości grid-row i grid-column

Aby stworzyć bardziej złożone układy, można łączyć właściwości grid-row i grid-column w celu dokładnego zarządzania rozmieszczeniem elementów.

Przykład: Złożony układ z użyciem grid-row i grid-column

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

      .item1 {
        background-color: lightblue;
        grid-row: 1 / 3; /* Element zajmuje pierwszą i drugą linię */
        grid-column: 1 / 3; /* Element zajmuje pierwszą i drugą kolumnę */
      }

      .item2 {
        background-color: lightgreen;
        grid-row: 3 / 5; /* Element zajmuje trzecią i czwartą linię */
        grid-column: 2 / 5; /* Element zajmuje drugą, trzecią i czwartą kolumnę */
      }

      .item3 {
        background-color: lightcoral;
        grid-row: 1 / 2; /* Element zajmuje pierwszą linię */
        grid-column: 3 / 5; /* Element zajmuje trzecią i czwartą kolumnę */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item1">Item 1</div>
      <div class="item2">Item 2</div>
      <div class="item3">Item 3</div>
    </div>
  </body>
</html>

Objaśnienie:

  • Kontener .container ma cztery wiersze i cztery kolumny, z których każda zajmuje równą przestrzeń
  • Element .item1 zajmuje pierwsze dwa wiersze i pierwsze dwie kolumny
  • Element .item2 zajmuje trzecią i czwartą linię oraz drugą, trzecią i czwartą kolumnę
  • Element .item3 zajmuje pierwszą linię oraz trzecią i czwartą kolumnę
1
Zadanie
Frontend SELF PL,  poziom 27lekcja 3
Niedostępne
Kilka kolumn
Kilka kolumn
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy