W tym poście przedstawiamy kilka zaawansowanych linii kodu CSS, które wykonują poważne zadania i pomagają tworzyć solidne, 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ższej prezentacji i tym poście omawiamy 10 zaawansowanych linii kodu CSS, które wykonują poważną pracę.
Aby śledzić te wersje demonstracyjne lub samodzielnie je wypróbować, zapoznaj się z witryną umieszczoną powyżej lub wejdź na 1linelayouts.com.
01. Super Centered: place-items: center
W przypadku pierwszego układu „jednowierszowego” rozwiążemy największą zagadkę w całym świecie CSS: wyśrodkowywanie elementów. Chcę Cię poinformować, że dzięki place-items: center jest to łatwiejsze, niż myślisz.
Najpierw określ grid jako metodę display, a następnie zapisz place-items: center w tym samym elemencie. place-items to skrót, który pozwala ustawić jednocześnie 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 dekonstruowany: flex: <grow> <shrink> <baseWidth>
Następny jest zdekonstruowany naleśnik. Jest to typowy układ witryn marketingowych, które mogą zawierać wiersz z 3 elementami, zwykle z obrazem, tytułem i tekstem opisującym niektóre cechy produktu. Na urządzeniach mobilnych chcemy, aby były one ładnie ułożone i rozszerzały się wraz ze zwiększaniem rozmiaru ekranu.
Dzięki zastosowaniu Flexboxa nie musisz używać zapytań o media, aby dostosować rozmieszczenie tych elementów, gdy zmienia się rozmiar ekranu.
Skrót flex oznacza: flex: <flex-grow> <flex-shrink> <flex-basis>.
Jeśli chcesz, aby pola wypełniały się do rozmiaru <flex-basis>, zmniejszały się przy mniejszych rozmiarach, 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 właściwość <flex-grow> na 1, aby wyglądało to tak:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Teraz, gdy zwiększasz lub zmniejszasz rozmiar ekranu, te elementy flex się kurczą i powiększają.
03. Sidebar Says: grid-template-columns: minmax(<min>, <max>) …)
Ta wersja demonstracyjna wykorzystuje funkcję minmax w układach siatki. Ustawiamy minimalny rozmiar paska bocznego na 150px, ale na większych ekranach może on rozciągać się do 25%. Pasek boczny zawsze zajmuje 25% poziomej przestrzeni elementu nadrzędnego, dopóki ta wartość 25% nie stanie się mniejsza niż 150px.
Dodaj to jako wartość właściwości grid-template-columns z tą wartością: minmax(150px, 25%) 1fr. Element w pierwszej kolumnie (w tym przypadku pasek boczny) ma minmax o wartości 150px przy 25%, a drugi element (tutaj sekcja main) zajmuje pozostałą przestrzeń jako pojedyncza ścieżka 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Stos naleśników: grid-template-rows: auto 1fr auto
W przeciwieństwie do dekonstrukcji naleśnika w tym przykładzie elementy podrzędne nie są zawijane, gdy zmienia się rozmiar ekranu. Ten układ, nazywany często przyklejoną stopką, jest często używany zarówno w witrynach, jak i aplikacjach, w aplikacjach mobilnych (stopka jest zwykle paskiem narzędzi) i witrynach (aplikacje jednostronicowe często używają tego układu globalnego).
Dodanie do komponentu właściwości display: grid spowoduje utworzenie siatki z jedną kolumną, ale obszar główny będzie miał tylko taką wysokość jak treść, a pod nim będzie znajdować się stopka.
Aby stopka była zawsze na dole, dodaj:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Dzięki temu nagłówek i stopka będą automatycznie dopasowywać się do rozmiaru elementów podrzędnych, a pozostała przestrzeń (1fr) zostanie przeznaczona na główny obszar. Wiersz o rozmiarze auto będzie miał rozmiar minimalnej zawartości elementów podrzędnych, więc gdy rozmiar zawartości będzie się zwiększać, wiersz będzie się powiększać, aby się do niej dopasować.
05. Klasyczny układ Świętego Graala: grid-template: auto 1fr auto / auto 1fr auto
W tym klasycznym układzie „świętego Graala” znajduje się nagłówek, stopka, lewy pasek boczny, prawy pasek boczny i główna treść. Jest podobny do poprzedniego układu, ale teraz ma paski boczne.
Aby zapisać całą siatkę za pomocą jednego wiersza kodu, użyj właściwości grid-template. Dzięki temu możesz ustawić zarówno wiersze, jak i kolumny.
Para właściwości i wartości to: grid-template: auto 1fr auto / auto 1fr auto. Ukośnik między pierwszą a drugą listą rozdzieloną spacjami to podział między wierszami i kolumnami.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Podobnie jak w ostatnim przykładzie, gdzie nagłówek i stopka miały zawartość o automatycznym rozmiarze, tutaj lewy i prawy pasek boczny są automatycznie dopasowywane do rozmiaru 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)
Następny jest kolejny klasyk: siatka 12-kolumnowa. Możesz szybko tworzyć siatki w CSS za pomocą funkcji repeat(). Użycie: repeat(12, 1fr); w kolumnach szablonu siatki daje 12 kolumn, każda o szerokości 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Teraz masz siatkę 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 kolumny.
Innym sposobem na zapisanie tego jest użycie słowa kluczowego span. W przypadku span ustawiasz linię początkową, a następnie liczbę kolumn, które mają być objęte od tego punktu początkowego. W tym przypadku grid-column: 1 / span 12 odpowiada grid-column: 1 / 13, a grid-column: 2 / span 6 odpowiada grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (powtarzanie, automatyczne, min./maks.): grid-template-columns(auto-fit, minmax(<base>, 1fr))
W tym siódmym przykładzie połączymy niektóre z poznanych już koncepcji, aby utworzyć układ elastyczny z automatycznie umieszczanymi i elastycznymi elementami podrzędnymi. Fajnie. Najważniejsze pojęcia, o których warto pamiętać, to repeat, auto-(fit|fill) i minmax()'. Można je zapamiętać dzięki akronimowi RAM.
Całość wygląda tak:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Ponownie używasz powtórzenia, ale tym razem używasz słowa kluczowego auto-fit zamiast jawnej wartości liczbowej. Umożliwia to automatyczne umieszczanie tych elementów podrzędnych. Te elementy podrzędne mają też podstawową wartość minimalną 150px i maksymalną 1fr, co oznacza, że na mniejszych ekranach będą zajmować całą szerokość 1fr, a gdy osiągną szerokość 150px, zaczną się układać w tym samym wierszu.
W przypadku auto-fit pola będą się rozciągać, gdy ich rozmiar w poziomie przekroczy 150 pikseli, aby wypełnić całą pozostałą przestrzeń. Jeśli jednak zmienisz tę wartość na auto-fill, nie będą się rozciągać, gdy ich rozmiar podstawowy w funkcji minmax zostanie przekroczony:
.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 do zademonstrowania jest justify-content: space-between, który umieszcza pierwszy i ostatni element podrzędny na krawędziach ich ramki ograniczającej, a pozostałą przestrzeń rozdziela równomiernie między elementy. Te karty są umieszczane w trybie wyświetlania Flexbox, a kierunek jest ustawiany na kolumnę za pomocą flex-direction: column.
Spowoduje to umieszczenie tytułu, opisu i bloku obrazu w pionowej kolumnie wewnątrz karty nadrzędnej. Następnie zastosowanie justify-content: space-between zakotwicza pierwszy (tytuł) i ostatni (blok obrazu) element na krawędziach kontenera flexbox, a tekst opisowy między nimi jest umieszczany w równej odległości od każdego punktu końcowego.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style: clamp(<min>, <actual>, <max>)
W tym miejscu przechodzimy do technik, które mają bardzo ciekawe zastosowania w układach i projektowaniu elastycznego interfejsu. W tym przykładzie ustawiasz szerokość za pomocą funkcji clamp w ten sposób: width: clamp(<min>, <actual>, <max>).
Ustawia to bezwzględny rozmiar minimalny i maksymalny oraz rzeczywisty rozmiar. Z wartościami może to wyglądać tak:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Minimalny rozmiar to 23ch lub 23 znaki, a maksymalny to 46ch, czyli 46 znaków. Jednostki szerokości znaków są oparte na rozmiarze czcionki elementu (konkretnie na szerokości glifu 0). „Rzeczywisty” rozmiar to 50%, co odpowiada 50% szerokości elementu nadrzędnego.
Funkcja clamp() sprawia, że ten element zachowuje szerokość 50% do momentu, gdy 50% jest większe niż 46ch (w przypadku szerszych widocznych obszarów) lub mniejsze niż 23ch (w przypadku mniejszych widocznych obszarów). Jak widać, gdy rozciągam i zmniejszam rozmiar elementu nadrzędnego, szerokość tej karty zwiększa się do maksymalnego punktu i zmniejsza do minimalnego. Następnie pozostaje wyśrodkowany w elemencie nadrzędnym, ponieważ zastosowaliśmy dodatkowe właściwości, aby go wyśrodkować. Dzięki temu układy będą bardziej czytelne, 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 typografii elastycznej. Możesz na przykład napisać: font-size: clamp(1.5rem, 20vw, 3rem). W tym przypadku rozmiar czcionki nagłówka zawsze będzie mieścił się w zakresie od 1.5rem do 3rem, ale będzie się zwiększał i zmniejszał na podstawie rzeczywistej wartości 20vw, aby dopasować się do szerokości widocznego obszaru.
To świetna technika zapewniająca czytelność dzięki minimalnej i maksymalnej wartości rozmiaru.
10. Szacunek dla aspektu: aspect-ratio: <width> / <height>
Ostatni układ rozwiązuje częsty problem z zachowaniem formatu obrazu.
Dzięki właściwości aspect-ratio, gdy zmieniam rozmiar karty, zielony blok wizualny zachowuje format obrazu 16:9. Zachowujemy format 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 użyć hacka padding-top i nadać mu dopełnienie 56.25%, aby ustawić współczynnik wysokości do szerokości. Wkrótce udostępnimy właściwość, która pozwoli uniknąć tego obejścia i konieczności obliczania wartości procentowej. Możesz utworzyć kwadrat o proporcjach 1 / 1, prostokąt o proporcjach 2:1 (2 / 1) i dowolny inny kształt, który pozwoli Ci przeskalować obraz do określonych proporcji.
.square {
aspect-ratio: 1 / 1;
}
Warto wiedzieć o tej funkcji, ponieważ rozwiązuje ona wiele problemów, z którymi deweloperzy często się borykają, zwłaszcza w przypadku filmów i elementów iframe.
Podsumowanie
Dziękujemy za zapoznanie się z tymi 10 liniami kodu CSS. Aby dowiedzieć się więcej, obejrzyj cały film.