Moda elastyczne układy z siatką CSS

Sep 12, 2025
Jak
A woman sits at a laptop tweaking a CSS Grid layout

Siatka CSS jest idealna do tworzenia dwóch osi układów wierszy i kolumn. Składnia jest prosta i tworzy układ strony. Układy, które byłyby wymagane wiele zagnieżdżonych pojemników, można teraz po prostu opisać w CSS.

Siatka działa inaczej na inne właściwości układu, ponieważ stosowanie wartości "siatki" do nieruchomości "Wyświetlacz" wpłynie na wszelkie bezpośrednie dzieci. Elementy te są teraz przedmiotami sieciami i będą ustawione zgodnie z zasadami ustawionymi na rodzicach (chyba że jest specjalnie umieszczona).

Uchwyty do siatki

Grid przynosi wiele nowych funkcji:

  • Gap siatki

Zamiast używać marginesów, siatka ma własną własność do definiowania luk między elementami siatkami, umożliwiając układ sieci, który ma zostać zdefiniowany i nienaruszony przez dowolne luki. Systemy sieciowe (jak te znalezione w Inuit i Twitter Bootstrap) zazwyczaj polegają na ustaleniu negatywnych marginesów w celu dostosowania wszystkiego poprawnie.

  • Ks. Jednostka

Krótko mówiąc do frakcji, ta nowa jednostka pomiaru służy do podziału układu do frakcji, z luką lub bez luki.

  • Umieszczenie siatki

CSS Grid pozwala na priorytetowo i umieszczone elementy w dowolnym miejscu na siatce przed wszystkimi innymi elementami, które są następnie umieszczone automatycznie.

  • Obszary siatki i szablony

Określono nazwane obszary na siatce, które można znaleźć w celu określenia układu w niemal modzie ASCII.

  • minimum maksimum()

Wartość właściwości "MinMax ()" umożliwia zastosowanie minimalnego i maksymalnego rozmiaru do elementów sieciowych, kolumn i wierszy. Ta funkcja jest niestety brakuje z flexbox i każdego innego modułu układu w CSS.

Zbuduj siatki

Potężne obszary i szablony CSS, umożliwiają łatwe osiągnięcie skomplikowanych układów. Zaczynasz, stosując nazwę do elementów w swojej siatce przy użyciu właściwości "obszar siatki" - na przykład "Nagłówek {Grid-Area: Header; } '. Po wymoncie wszystkich obszarów w swojej siatki możesz następnie użyć właściwości "obszary szablonów siatki", aby opisać układ. 

 Szablon siatki - obszary:
  "Nagłówek nagłówka nagłówka"
  "Pasownik boczny w lewo-boczny
  "Stopka stopki stopki"
;

Przykład kodu Powyższy opisuje siatkę trzech o trzech o trzech, po prostu powtarzasz nazwę elementu siatki, jeśli chcesz, aby obejmować wiele kolumn lub wierszy. Możesz także użyć zapytań multimedialnych w celu zmiany układu siatki dla ekranów różnych rozmiarów.

Następnie możesz użyć nowego urządzenia "FR", aby zdefiniować, jak szerokość jest podzielona wśród różnych kolumn: 

 Grid-szablon-kolumny: 1fr 3fr 1fr;

Przykład pokazany powyżej podzieli dostępną szerokość na pięć wartości równych szerokości; Innymi słowy stosuje jedną piątą do pierwszej kolumny, trzy piąte do drugiej kolumny i ostatnią piątą do ostatniej kolumny.

W celu rozmiaru wierszy możesz użyć nowej wartości właściwości "MinMax" do wielkości górnych i dolnych kolumn do ich zawartości, a następnie pozwolić, aby środkowy wiersz obejmował pozostałą przestrzeń w sieci. 

 Grid-Template-Rows:
  MinMax (Min-Content, MAX-Content)
  automatyczny
Minmax (Min-Content, MAX-Content);

Ten artykuł został pierwotnie opublikowany w wydaniu 271 kreatywnych projektantów WWW Magazine Web Design Magazine. Kup wydać 271. lub Subskrybuj projektant stron internetowych .

Chcesz wzmocnić umiejętności siatki CSS?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018

Storower Brenda daje jej rozmowę za pomocą sieci CSS w prawdziwym świecie w Generuj Nowy Jork od 25 do 27 kwietnia 2018 r

Jako projektant i front-end Developer w Agencji Rozwoju oprogramowania, Brenda Storer stosuje CSS Grid w produkcji stron internetowych od jego początkowej wersji do przeglądarek w marcu 2017 r. I jest dużym fanem.

W jej rozmowie Wygeneruj nowy Jork od 25-27 kwietnia 2018 r , Brenda pokaże krok po kroku, w jaki sposób można stopniowo poprawić witrynę z CSS Grid i napisać bulletoodporne oparcie dla starszych przeglądarek (lub nawet nadal korzystać z bieżących struktury siatki jako fallback), wszystkie z czystymi CSS: Nie jest wymagany JavaScript .

Generuj Nowy Jork odbywa się z dnia 25-27 kwietnia 2018 r. Uzyskaj teraz swój bilet .

Powiązane artykuły:

  • Sekrety układów CSS Siatka ujawniły
  • Utwórz reagujący układ z siatką CSS
  • Zdobądź prędkość z siatką CSS

Jak - Najpopularniejsze artykuły

Jak ukryć kod JavaScript z View Source

Jak Sep 12, 2025

Jeśli nie podejmujesz środków ostrożności z kodem JavaScript, ułatwia życie dla każdego, kto chce go sklonować. Ale jeś..

Jak utworzyć autentyczny komiks mangi

Jak Sep 12, 2025

Strona 1 z 2: Strona 1 Strona 1 Strona 2 Podczas gdy styl i kończy..

Zasilanie bloga za pomocą interfejsu API WordPress

Jak Sep 12, 2025

W ciągu ostatnich kilku lat rozwój reszty API dla WordPress otworzył nowe drzwi dla deweloperów. Deweloperzy, którzy wcześn..

Jak stopić obiekt 3D z trzema.js

Jak Sep 12, 2025

Web, jak to wiemy, stale się zmieniają i ewoluuje. Co nadal pamiętamy jako prosty i prosty medium zyskał inny wymiar kilka la..

Jak utworzyć proxy redShift w kinie 4D

Jak Sep 12, 2025

Kino 4d. Jest świetny w wielu rzeczach, ale może spowolnić, gdy ma wiele obiektów na scenie, co jest prawdziwym p..

Zbuduj niestandardowy interfejs Maya

Jak Sep 12, 2025

Nowoczesne oprogramowanie może być niezwykle potężne i wszechogarniające. Maya nie różni się, oferując oszołomiony tablicę do narzędzi, poleceń i opcji, które pomogą Ci osiągn..

Zbuduj złożone układy z Postcss-Flexbox

Jak Sep 12, 2025

Flexbox to świetne narzędzie do redukcji CSS Blow i ma trochę cukru wbudowany, aby poradzić sobie z rzeczami jak kolejność ..

Jak utworzyć animowany baner internetowy w Photoshopie

Jak Sep 12, 2025

Tworzenie banerów internetowych nie jest najbardziej efektownym zadaniami na świecie, ale jest to coś, co każdy projekt będzie musiał zrobić w pewnym momencie w swojej karierze, prawdo..

Kategorie