Utwórz reagujący układ z siatką CSS

Feb 4, 2026

Jak

Układ siatki CSS. Codziennie rośnie w obsłudze przeglądarki i możemy wysyłać siatkę CSS do produkcji. Szybkie przyjęcie siatki CSS było naprawdę niezwykłe.

Zanim dojdziemy do reagującego układu portfela z siatką CSS, wyczyśćmy kilka rzeczy w górę: CSS Grid nie jest zastąpieniem Flexbox. . To nie jest nawet wymiana pływaków. W rzeczywistości możesz uświadomić sobie, że korzystamy z flexbox do robienia rzeczy, które CSS robi znacznie lepiej. Ale zamiast myśleć pod względem wymiany, możemy myśleć pod względem kombinacji.

15 Naprawdę przydatne responsywne samouczki projektowania stron internetowych

Wyobraź sobie masło orzechowe i kanapkę z galaretką. Masło orzechowe i galaretki są bardzo wielkie, ale kiedy się spotykają, rodzi się nowa rzecz, a magia się dzieje.

To jest to, co nasz Układ strony internetowej. Narzędzia są jak. Są świetnie w rzeczy, które robią indywidualnie, ale kiedy są łączone, magia się dzieje i możemy stworzyć nowe i ekscytujące układy. W tym przypadku będziemy stworzyć program Web Development PB & AMP; J z naszych własnych w sieci CSS i Flexbox. Chcesz jeszcze bardziej uprościć swój proces? Wybierz przyzwoity Kreator strony internetowej .

01. Skonfiguruj znaczkę

case study title repeated — Nasz układ nie wygląda zbyt wiele, ale szkielet z naszymi sześcioma przedmiotami jest na miejscu

W tym samouczku będziemy korzystać ze strony CSS Grid i Flexbox, aby utworzyć responsywny układ portfolio. Każda z tych skrzynek jest inną wielkością, niektóre z nich obejmują rzędami, a każde pudełko ma tytuł, który siedzi na dole. Użyjemy niektórych dużych narzędzi wyrównujących, które przychodzą z flexbox, aby to się stało.

Zacznijmy od konfigurowania naszego znacznika.

 / LT; UL Class = "Pudełka" & GT;
  & lt; li & gt;
    & lt; div class = "pudełka__Text-owijka" & gt;
      & LT; H2 & GT; Tytuł studium przypadku / LT; / H2 & GT;
      & LT; P & GT; chwytliwy opis na nasze studium przypadku. Pracowaliśmy ciężko. & LT; / P & GT;
    & lt; / div & gt;
  & lt; / li & gt;
& lt; / ul & gt;

Dopliczymy ten listę i wszystko w nim sześć razy, więc mamy przedmioty do zabawy. W przypadku zastanawiania się, zdecydowaliśmy się użyć ul element tutaj, ponieważ jest to lista wpisów. Zapraszam do używania, co czuje się odpowiednio do Ciebie.

Wewnątrz elementu listy mamy div. z klasą .boxes__text-owijka który będzie zawierał tytuł studium przypadku i towarzyszącego opisu.

02. Zapisz style bazowe

case study title with different styling — Ustawiliśmy naszą czcionkę do czegoś nieco ładniejszego i usunęliśmy domyślny margines z nagłówków i akapitów

Teraz ustawmy kilka stylów bazowych do pracy.

 Ciało {
  Czcionka: Avenir, Sans-Serif;
  Margines: 2Rem Auto;
  Szerokość: 95%;
}
h2,
p {
  Marża: 0;
}
ul {
  styl listy: brak;
  Wyściółka: 0;
  Marża: 0;
}
.boxes & gt; * {
  Wypełnienie: .5rem;
  kolor-kolor: # 333;
  kolor biały;
}

Zmieniliśmy czcionkę, aby być avenir. Usuniemy margines z naszej pozycji i akapitu, i zresetować listę nieuporządkowaną. Dajemy również każdą listę pozycję niektórych domyślnych stylów, aby pomóc nam zobaczyć, gdzie jest każda.

03. Skonfiguruj swoją siatkę

case study title with gaps between them — Tylko trzy linie dodaliśmy rynny między naszymi elementami siatkami i uczyniło ich nieco wyższe

Chcemy najpierw zbudować nasz układ telefonu komórkowego. Konfigurowanie naszej siatki na małych ekranach jest tak proste, jak:

 .boxes {
  Wyświetlacz: siatka;
  Grid-Auto-Rows: MinMax (125px, Auto);
  Grid-Gap: .5rem;
}

Siatka będzie stosować nasze przedmioty na drugim, ponieważ domyślnie jest tylko jedna kolumna. Stworzymy trochę miejsca między każdym studium przypadku za pomocą Grafika - Pozwala nam dodać rynny między rzędami i kolumnami.

Zapomnij o dodaniu marginesu do kolumn tylko po potrzebach złożonych nth-dziecko selektory; Rachunki pojawiają się tylko między kolumnami lub wierszami, nigdy po kolumnie lub przed kolumną Row.grid-luk jest skrótem Grafika grubego i gardło . Zwykle korzystamy z Longhanda, ale nadpisujemy zarówno jak przeglądarka rośnie, więc użyjemy shorthand.

Następnie użyjemy grid-auto-rzędy Aby powiedzieć naszym kontenerze siatki wysokość nowych wierszy. Grid stworzy nowe wiersze, aby umieścić wszystkie nasze treści. Możemy kontrolować rozmiar tych automatycznie tworzonych wierszy za pomocą grid-auto-rzędy własność. Używamy nowej funkcji dostępnej dla nas: minimum maksimum() . Z minimum maksimum() Możemy określić minimalny rozmiar i maksymalny rozmiar.

Dzięki naszemu kodzie mówimy, że chcemy, aby nasze wiersze były minimum 120px i maksymalnie auto. Używamy tutaj auto, ponieważ chcemy rosnąć nasze rzędy, jeśli treść to wymaga.

04. Ustaw dużą zgodność przeglądarki

case study title in a row — Nasza siatka ma kształt! Mamy sześć kolumn do pracy z rynsztokiem między naszymi pozycjami sieci

Ustawmy naszą stronę tak, że gdy nasza przeglądarka ma 40em lub większa, nasza kontener siatki ma sześć kolumn jednej frakcji każda.

 Ekran @media i (min-szerokość: 40em) {
  .pudła {
    kolumny szablonów siatki: powtórz (6, 1fr);
    GRAD-GAP: 2PX;
  }
}

kolumny szablonów siatki Czy właściwość, której używamy, aby powiedzieć naszą siatkę, ile powinno istnieć wiele kolumn. Akceptuje wszystkie jednostki długości, które znamy i kochamy takie jak Rem. , EM. , px. , procenty, VW. , vh. i ks .

The. ks to nowa jednostka, którą dostajemy z układem siatki CSS. Dzięki nim możemy powiedzieć przeglądarce do zrobienia matematyki zamiast nas - doskonała.

Opowiadając przeglądarkę, aby utworzyć sześć kolumn jednej frakcji, przeglądarka obliczy szerokość naszego kontenera sieciowego i podzieliła go na sześć równych kolumn. Ponadto, ponieważ siatka jest mądra, tylko dzieli tylko przestrzeń pozostawioną po obliczeniu rynnie, którą określono.

05. Poszczególne przedmioty w stylu

case study title with an image behind — Kawa sprawia, że wszystko wygląda ładniej, prawda? Również subtelny gradient sprawia, że nasz tytuł i opis wyróżnia się

Nasze studia przypadków wyglądają trochę do szarych pudełek. Dodajmy obraz tła, zdobądź nasze tytuły, aby wyświetlić na dole tych skrzynek i dodać gradient, aby nasz tytuł wyróżniał się.

 .boxes li {
  zdjęcie w tle:
    Liniowy gradient (RGBA (0,0,0,0), RGBA (0,0,0,0.8)),
    URL (ścieżka / do / obraz);
  Rozmiar tła: okładka;
  Wyświetlacz: Flex;
  Wyrównuj elementy: Flex-End;
}

Ten obraz tła był darmowy obraz Nieodpłatny , ale możesz używać tego, który chcesz obrazić. Przynę też do miksu, aby wyrównać nasz tekst na dole naszych pola. Jeszcze nie zobaczysz, ale ponieważ umieścimy każde inne pudełko, ostatecznie zobaczysz, że działa.

06. Umieść przedmioty na siatce

case study title with one image above and five below — Grid ułatwia rozmiar naszej siatki, jednak chcielibyśmy. Ale to tylko początek

Niestety, siatka nie ma sposobu automatycznego umieszczenia elementów w układzie siatki, którą widziałem na początku. Na szczęście dla nas, jednak siatka daje nam narzędzia do zrobienia ręcznie łatwo. W tym samouczku użyjemy NTH-Child, aby umieścić każdą pozycję listy. W witrynie produkcyjnej radzimy sobie wykorzystać klasę, że biorąc pod uwagę właściwe planowanie, może umożliwić automatyzowanie układów takich jak w witrynie ciężkiej zawartości.

Zacznijmy z naszego pierwszego przedmiotu.

 Ekran @media i (min-szerokość: 40em) {
  .boxes li: nth-dziecko (1) {
    kolumna siatki: 1 / -1;
    Grid-Row: Span 3;
  }
}

Będziemy umieścić wszystkie nasze style umieszczające wewnątrz tego zapytania medialnego napisaliśmy wcześniej, ponieważ chcemy, aby ten układ się wydarzył po tym, jak nasza przeglądarka jest 40a lub większa. Z nth-dziecko Skierujemy się na pierwszą listę. CSS Grid pozwala nam łatwo umieścić nasze przedmioty z kolumną siatki i siatki. Istnieje wiele sposobów, aby określić, gdzie powinny być przedmioty, ale tutaj opowiadamy naszym przedmiocie, aby rozpocząć w kolumnie linia jeden i obejmuje cały pojemnik z -1.

Następnie, z siatką, opowiadamy elementowi, aby obejmował trzy rzędy. Skąd wiemy, że trzy rzędy będą wielkością, którą chcemy? Cóż, określiliśmy rozmiar tych wierszy za pomocą siatki-auto-rzędów kilka momentów temu, a jeśli nie jesteśmy z nich zadowoleni, możemy zmienić minimalny rozmiar.

Umieśćmy resztę naszych przedmiotów.

Ekran @Media i (min-szerokość: 40em) {
  .boxes li: nth-dziecko (2) {
    Kolumna siatki: Span 2;
    Row Grid: Span 7;
  }

  .boxes li: nth-dziecko (3) {
    Kolumna siatki: Span 4;
    Grid-Row: Span 3;
  }

  .boxes li: nth-dziecko (4) {
    Kolumna siatki: Span 2;
    Row Grid: Span 4;
  }

  .boxes li: nth-dziecko (5),
  .boxes li: nth-dziecko (6) {
    Kolumna siatki: Span 2;
    Row Grid: Span 2;
  }
}

Czy to nie zadziwiające, ile daje nam układ sieciowy? Z kilkoma liniami kodu możemy zgromadzić całkowicie reagujący układ, który nie pęknie, jeśli dodano więcej elementów.

Jasne, mogą wyglądać trochę wonky, ponieważ domyślnie zajmą jedną kolumnę siatki i wiersz, ale nie przełamuje naszego układu. Gdybyśmy robili to z pływakami i stałymi szerokościami i wysokościami, bylibyśmy w związku, jeśli miało zostać dodane więcej treści.

finished layout with different images in different places — Nasz gotowy układ! Czy to nie niesamowite? Grid pozwala nam łatwo umieścić nasze przedmioty w dwóch wymiarach

Szybko bok o starszych przeglądarkach

Ok, nadszedł czas, aby zająć się słoniem w pokoju. - Co z starszymi przeglądarkami? Oto zapytania bardzo dobrze wspierany i gdzie nie możemy najpierw umieścić nasze fallback. Na przykład napiszeliśmy coś wzdłuż linii:

 .our-selector {
  Wyświetlacz: Flex;
}

/ * Twój kod siatki * /
@Supports (Display: Grid) {
  Wyświetlacz: siatka;
  kolumny szablonów siatki: powtórz (3, 1fr);
  GRAD-GAP: 1REM 2REM;
}

Pisanie naszego kodu w ten sposób oznacza, że jeśli przeglądarka rozumie układ siatki, użyje tego zamiast flexbox. Ponadto, ponieważ obejmujemy kaskadę, przeglądarki, które nie rozumieją zapytań funkcji, zignorują je i mają już potrzebne informacje. Możemy potrzebować zaplanować, jak piszemy nasze style trochę więcej niż zwykle, ale dzięki temu możemy stworzyć wspaniałe układy z rozsądnymi fontanami. Jeśli chcesz zapisać swoje stare strony, eksportuj je jako PDF i zapisz je magazyn w chmurze .

Również w miarę upływu czasu będzie coraz więcej wsparcia dla sieci CSS. Pomyśl, jak wspaniale byłoby później usunąć nasze wyniki i pozostaw wszystkie CSS związane z siatką. Ponieważ dowiedz się więcej o siatce, zdasz sobie sprawę, że robi wiele rzeczy, które teraz robimy z wieloma mniejszymi liniami CSS. Pamiętaj, że masz szczególnie złożoną stronę, twój hosting Obsługa musi być do zarysowania.

Ten artykuł pierwotnie pojawił się magazyn netto. , wiodący na świecie magazyn dla deweloperów i projektantów stron internetowych. Subskrybuj tutaj .

Czytaj więcej:

Sekrety układów CSS Siatka ujawniły
30 Narzędzia do projektowania stron internetowych, aby przyspieszyć przepływ pracy
Moda elastyczne układy z siatką CSS

Utwórz reagujący układ z siatką CSS

01. Skonfiguruj znaczkę

02. Zapisz style bazowe

03. Skonfiguruj swoją siatkę

04. Ustaw dużą zgodność przeglądarki

05. Poszczególne przedmioty w stylu

06. Umieść przedmioty na siatce

Szybko bok o starszych przeglądarkach

Jak - Najpopularniejsze artykuły

6 Szybkie wskazówki dotyczące poprawy rysowania pędzla

Zacznij od Redux Thunk

Utwórz krajobraz 3D w 6 prostych krokach

Naucz się animować dla dzieci

Master narzędzie do noża

Jak poruszać się między DAZ Studio a Zbrush

Grow rośliny w Houdinie

Zrób typograficzny plakat za pomocą Adobe InDesign

Kategorie