Podstawy Grid

Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 31 z 43.

CSS Grid to system układu, który pozwala łatwo tworzyć strony internetowe z wierszami i kolumnami. Świetnie sprawdza się przy tworzeniu złożonych i responsywnych układów bez konieczności używania floatów ani skomplikowanego pozycjonowania. Co więcej, działa we wszystkich nowoczesnych przeglądarkach.

Aby utworzyć kontener siatki, użyj właściwości display:

.container {
  display: grid;
}

Zdefiniuj kolumny w siatce za pomocą grid-template-columns oraz jednostek px lub fr (ułamków):

/* To tworzy trzy kolumny, z których środkowa zajmuje dwa razy więcej miejsca niż każda z pozostałych. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Zdefiniuj wiersze za pomocą grid-template-rows. Użyj właściwości gap, aby dodać odstęp między elementami siatki.

/* Tworzy siatkę z dwoma wierszami: pierwszy ma wysokość 100px, a drugi 200px */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

Wyzwanie

Łatwy

Utwórz regułę CSS dla klasy o nazwie grid-container, która:

Ustawia właściwość display tak, aby utworzyć siatkę
Tworzy trzy kolumny o jednakowej szerokości za pomocą jednostki fr
Tworzy dwa wiersze: pierwszy o wysokości 150px, a drugi o wysokości 250px
Dodaje odstęp 20px między wszystkimi elementami siatki

Napisz tylko kod CSS dla klasy grid-container.

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>