W tym poście znajdziesz kilka przydatnych wierszy kodu CSS, które wykonują za Ciebie ciężką pracę i pomagają tworzyć nowoczesne układy.
Data publikacji: 7 lipca 2020 r., ostatnia aktualizacja: 15 grudnia 2025 r.
Nowoczesne układy CSS umożliwiają programistom pisanie naprawdę przydatnych i solidnych reguł stylów za pomocą zaledwie kilku naciśnięć klawiszy. W powyższym wystąpieniu i w tym poście omawiamy 10 wierszy kodu CSS, które wykonują wiele zadań.
Aby samodzielnie wypróbować te wersje demonstracyjne, otwórz witrynę powyżej lub wejdź na 1linelayouts.com.
01. Super wyśrodkowany: place-items: center
W przypadku pierwszego układu „jednoliniowego” rozwiążmy największą zagadkę w świecie CSS: wyśrodkowywanie elementów. Chcę Cię zapewnić, że z place-items: center jest to łatwiejsze, niż myślisz.
Najpierw określ grid jako metodę display, a potem wpisz place-items: center w tym samym elemencie. place-items to skrót, który umożliwia jednoczesne ustawienie wartości align-items i justify-items. Jeśli ustawisz wartość center, zarówno align-items, jak i justify-items będą miały wartość center.
.parent {
display: grid;
place-items: center;
}
Dzięki temu treść jest idealnie wyśrodkowana w elemencie nadrzędnym, niezależnie od jej rozmiaru.
02. Naleśnik w rozsypce: flex: <grow> <shrink> <baseWidth>
Następny jest rozłożony naleśnik. Jest to typowy układ stron marketingowych, które mogą zawierać na przykład wiersz z 3 elementami, zwykle z obrazem, tytułem i tekstem opisującym niektóre cechy produktu. Na urządzeniach mobilnych chcemy, aby te elementy były ułożone jeden pod drugim i rozszerzały się wraz ze wzrostem rozmiaru ekranu.
Dzięki użyciu Flexbox do uzyskania tego efektu nie musisz stosować zapytań o media, aby dostosować położenie tych elementów po zmianie rozmiaru ekranu.
Skrót flex oznacza: flex: <flex-grow> <flex-shrink> <flex-basis>.
Dlatego jeśli chcesz, aby pola miały rozmiar <flex-basis>, zmniejszały się w przypadku mniejszych rozmiarów, ale nie rozciągały się, aby wypełnić dodatkową przestrzeń, wpisz: flex: 0 1 <flex-basis>. W tym przypadku <flex-basis> to 150px, więc wygląda to tak:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Jeśli chcesz, aby pola rozciągały się i wypełniały przestrzeń, gdy przechodzą do następnego wiersza, ustaw wartość <flex-grow> na 1. Będzie to wyglądać tak:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Teraz, gdy zwiększasz lub zmniejszasz rozmiar ekranu, oba elementy flex pomniejszają się i powiększają.
03. Pasek boczny mówi: grid-template-columns: minmax(<min>, <max>) …)
W tej wersji demonstracyjnej wykorzystano funkcję minmax w przypadku układów siatki. Ustawiamy tu minimalny rozmiar paska bocznego na 150px, ale na większych ekranach pozwalamy mu rozciągać się do 25%. Panel boczny zawsze zajmuje 25% miejsca w poziomie w stosunku do elementu nadrzędnego, dopóki ta wartość nie będzie mniejsza niż 150px.25%
Dodaj tę wartość do atrybutu grid-template-columns:minmax(150px, 25%) 1fr. Element w pierwszej kolumnie (w tym przypadku pasek boczny) otrzymuje minmax o wartości 150px w punkcie 25%, a drugi element (w tym przypadku sekcja main) zajmuje pozostałą przestrzeń jako pojedyncza ścieżka 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake Stack: grid-template-rows: auto 1fr auto
W przeciwieństwie do przykładu Deconstructed Pancake ten przykład nie zawija elementów podrzędnych, gdy zmienia się rozmiar ekranu. Ten układ, często nazywany przyklejonym stopką, jest często używany zarówno w witrynach, jak i w aplikacjach mobilnych (stopka jest zwykle paskiem narzędzi), a także w witrynach (aplikacje jednostronicowe często korzystają z tego globalnego układu).
Dodanie do komponentu wartości display: grid spowoduje utworzenie siatki z 1 kolumną, ale główny obszar będzie miał wysokość tylko treści, a stopka będzie znajdować się pod nim.
Aby stopka była przyklejona do dołu, dodaj:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
To ustawienie powoduje, że treść nagłówka i stopki automatycznie przyjmuje rozmiar elementów podrzędnych, a pozostałe miejsce (1fr) jest przypisywane do głównego obszaru. Wiersz o rozmiarze auto przyjmuje rozmiar minimalnej treści elementów podrzędnych, więc w miarę zwiększania się rozmiaru tej treści wiersz będzie się powiększać.
05. Klasyczny układ Holy Grail: grid-template: auto 1fr auto / auto 1fr auto
W tym klasycznym układzie typu „święty Graal” znajdują się nagłówek, stopka, lewy pasek boczny, prawy pasek boczny i treść główna. Jest podobny do poprzedniego układu, ale ma teraz paski boczne.
Aby zapisać całą siatkę za pomocą jednego wiersza kodu, użyj właściwości grid-template. Umożliwia to jednoczesne ustawienie wierszy i kolumn.
Para właściwość i wartość to: grid-template: auto 1fr auto / auto 1fr auto. Ukośnik między pierwszą a drugą listą rozdzieloną spacjami oznacza podział na wiersze i kolumny.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Podobnie jak w ostatnim przykładzie, w którym nagłówek i stopka miały treści o automatycznie dostosowywanym rozmiarze, tutaj lewy i prawy pasek boczny mają automatycznie dostosowywany rozmiar na podstawie rozmiaru wewnętrznego elementów podrzędnych. Tym razem jednak chodzi o rozmiar poziomy (szerokość), a nie pionowy (wysokość).
06. Siatka 12-kolumnowa: grid-template-columns: repeat(12, 1fr)
Kolejny klasyk to siatka 12-kolumnowa. Za pomocą funkcji repeat() możesz szybko pisać siatki w CSS. Użycie: repeat(12, 1fr); w przypadku kolumn szablonu siatki daje 12 kolumn o szerokości 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Teraz masz siatkę ścieżek z 12 kolumnami, na której możesz umieścić elementy podrzędne. Jednym ze sposobów jest umieszczenie ich za pomocą linii siatki. Na przykład grid-column: 1 / 13 obejmuje wszystkie wiersze od pierwszego do ostatniego (13) i 12 kolumn. grid-column: 1 / 5; obejmowałby pierwsze 4 elementy.
Możesz też użyć słowa kluczowego span. W przypadku funkcji span ustawiasz wiersz początkowy, a następnie liczbę kolumn, które mają być objęte zakresem od tego punktu początkowego. W takim przypadku grid-column: 1 / span 12 będzie odpowiednikiem grid-column: 1 / 13, a grid-column: 2 / span 6 będzie odpowiednikiem grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
W tym siódmym przykładzie połącz niektóre z poznanych już koncepcji, aby utworzyć elastyczny układ z automatycznie rozmieszczonymi i elastycznymi elementami podrzędnymi. Całkiem fajnie. Kluczowe terminy, o których musisz pamiętać, to repeat, auto-(fit|fill) i minmax()'. Możesz je zapamiętać dzięki akronimowi RAM.
W sumie wygląda to tak:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Ponownie używasz funkcji powtarzania, ale tym razem używasz słowa kluczowego auto-fit zamiast konkretnej wartości liczbowej. Umożliwia to automatyczne umieszczanie tych elementów podrzędnych. Te elementy mają też minimalną wartość bazową 150px i maksymalną wartość 1fr, co oznacza, że na mniejszych ekranach zajmują pełną szerokość 1fr, a gdy osiągną szerokość 150px, zaczną się mieścić w tym samym wierszu.
W przypadku auto-fit pola będą się rozciągać, gdy ich szerokość przekroczy 150 pikseli, aby wypełnić całą pozostałą przestrzeń. Jeśli jednak zmienisz tę wartość na auto-fill, nie będą się rozciągać po przekroczeniu rozmiaru podstawowego w funkcji minmax:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Line Up: justify-content: space-between
W przypadku następnego układu głównym punktem jest justify-content: space-between, który umieszcza pierwszy i ostatni element podrzędny na krawędziach ich ramki ograniczającej, a pozostałą przestrzeń równomiernie rozdziela między elementy. W przypadku tych kart są one umieszczane w trybie wyświetlania Flexbox, a kierunek jest ustawiany na kolumnę za pomocą flex-direction: column.
Tytuł, opis i blok obrazu zostaną umieszczone w pionowej kolumnie wewnątrz karty nadrzędnej. Zastosowanie wartości justify-content: space-between powoduje przykotwiczenie pierwszego (tytuł) i ostatniego (blok obrazu) elementu do krawędzi flexboksa, a tekst opisowy między nimi jest umieszczany w równych odstępach od każdego punktu końcowego.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Ograniczanie mojego stylu: clamp(<min>, <actual>, <max>)
W tym miejscu przechodzimy do technik, które mają bardzo ciekawe implikacje dla układów i projektowania interfejsu użytkownika dostosowującego się do urządzenia. W tej wersji demonstracyjnej szerokość jest ustawiana za pomocą funkcji clamp w ten sposób: width: clamp(<min>, <actual>, <max>).
Ustawia to bezwzględny minimalny i maksymalny rozmiar oraz rzeczywisty rozmiar. W przypadku wartości może to wyglądać tak:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Minimalny rozmiar to 23ch lub 23 jednostki znaków, a maksymalny to 46ch, czyli 46 znaków. Jednostki szerokości znaku są oparte na rozmiarze czcionki elementu (a konkretnie na szerokości glifu 0). „Rzeczywisty” rozmiar to 50%, co stanowi 50% szerokości elementu nadrzędnego.
Funkcja clamp() umożliwia temu elementowi zachowanie szerokości 50% dopóki 50% nie będzie większe niż 46ch (w przypadku szerszych obszarów wyświetlania) lub mniejsze niż 23ch (w przypadku mniejszych obszarów wyświetlania). Widać, że gdy rozciągam i zmniejszam rozmiar elementu nadrzędnego, szerokość tej karty zwiększa się do maksymalnej wartości i zmniejsza do minimalnej wartości. Następnie pozostaje wyśrodkowany w elemencie nadrzędnym, ponieważ zastosowaliśmy dodatkowe właściwości, aby go wyśrodkować. Umożliwia to tworzenie bardziej czytelnych układów, ponieważ tekst nie będzie zbyt szeroki (powyżej 46ch) ani zbyt ściśnięty i wąski (poniżej 23ch).
To także świetny sposób na wdrożenie responsywnej typografii. Możesz na przykład napisać: font-size: clamp(1.5rem, 20vw, 3rem). W tym przypadku rozmiar czcionki nagłówka zawsze będzie się mieścił w przedziale od 1.5rem do 3rem, ale będzie się zwiększał i zmniejszał w zależności od rzeczywistej wartości 20vw, aby dopasować się do szerokości widocznego obszaru.
To świetna technika, która zapewnia czytelność przy minimalnej i maksymalnej wartości rozmiaru.
10. Zachowaj proporcje: aspect-ratio: <width> / <height>
Ostatni układ rozwiązuje często spotykany problem z zachowaniem proporcji obrazu.
W przypadku właściwości aspect-ratio zielony blok wizualny zachowuje format obrazu 16:9 podczas zmiany rozmiaru karty. Zachowujemy proporcje obrazu za pomocą aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Aby zachować format obrazu 16:9 bez tej właściwości, musisz zastosować padding-top obejście i ustawić dopełnienie 56.25%, aby określić stosunek wysokości do szerokości. Wkrótce udostępnimy w tym celu odpowiednią właściwość, aby uniknąć włamania i konieczności obliczania procentu. Możesz utworzyć kwadrat o współczynniku proporcji 1 / 1, format 2:1 o współczynniku proporcji 2 / 1 i dowolny inny format, który pozwoli Ci skalować obraz przy zachowaniu określonego współczynnika proporcji.
.square {
aspect-ratio: 1 / 1;
}
Warto znać tę funkcję, ponieważ rozwiązuje ona wiele problemów, z którymi deweloperzy często się zmagają, zwłaszcza w przypadku filmów i elementów iframe.
Podsumowanie
Dziękujemy za śledzenie tej podróży przez 10 wierszy kodu CSS. Aby dowiedzieć się więcej, obejrzyj pełny film i wypróbuj wersje demonstracyjne.