TablicaPro / karta pracy ucznia / CSS

CSS Grid — ćwiczenia z tworzenia siatki strony

Klasa: __________ Numer: __________ Data: __________

Pracuj w przygotowanym pliku. Po każdej zmianie zapisz go i sprawdź rezultat.

Kod do rozpoczęcia pracy

.siatka {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 16px;
}

Zadanie 1

Ustaw .siatka jako siatkę o trzech kolumnach 1fr 2fr 1fr z odstępem 16 px. Zmierz szerokości pól 2 i 3.

Zadanie 2

Rozciągnij pole #g1 na całą szerokość siatki (grid-column: 1 / -1). Zmierz jego szerokość.

Zadanie 3

Rozciągnij #g4 na dwie kolumny (span 2). Zmierz jego szerokość oraz położenie i szerokość pól 5, 6 i 7.

Sprawdź przed oddaniem

Zadanie 1: display grid i kolumny 2 pkt, odstęp i pomiar 1 pkt; zadanie 2: grid-column 1 / -1 1 pkt, pomiar 1 pkt; zadanie 3: span 2 1 pkt, pomiary położenia 2 pkt; wyjaśnienie obliczeń z gap 1 pkt. Razem 10 pkt.

Jaką zmianę w kodzie potrafisz samodzielnie wyjaśnić?

Drukuj kartę pracy