W tym poście znajdziesz kilka przydatnych wierszy kodu CSS, które wykonują ciężką pracę i pomagają tworzyć solidne, nowoczesne układy.
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ą ciężką pracę.
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 wersji dekonstrukcyjnej: flex: <grow> <shrink> <baseWidth>
Kolejny jest naleśnik w częściach. 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: grid-template-columns: minmax(<min>, <max>) …)
W tej wersji demonstracyjnej użyto funkcji minmax do układów siatki. Ustawiamy 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 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 elementu display: grid spowoduje utworzenie siatki z jedną 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 ustawia nagłówek i stopkę tak, aby automatycznie dostosowywały się do rozmiaru elementów podrzędnych, a pozostałe miejsce (1fr) jest przypisywane do głównego obszaru. Wiersz o rozmiarze auto będzie miał rozmiar minimalnej zawartości elementów podrzędnych, więc w miarę zwiększania się rozmiaru tej zawartoś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ść).
6. 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 mamy siatkę ścieżek z 12 kolumnami, więc możemy umieścić na niej 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 dni.
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 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ą 1fr, co oznacza, że na mniejszych ekranach zajmują całą szerokość 1fr, a gdy osiągną szerokość 150px, zaczną się mieścić w jednym wierszu.
W przypadku auto-fit pola będą się rozciągać, gdy ich rozmiar poziomy 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 kolejnego układu najważniejszym elementem 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.
Spowoduje to umieszczenie tytułu, opisu i bloku obrazu w kolumnie pionowej w karcie nadrzędnej. Następnie zastosowanie justify-content: space-between powoduje przykotwiczenie pierwszego (tytuł) i ostatniego (blok obrazu) elementu do krawędzi flexboxa, 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 stylu: clamp(<min>, <actual>, <max>)
W tym miejscu przejdziemy do technik, które mają mniejsze wsparcie w przeglądarkach, ale mają bardzo ciekawe implikacje dla układów i projektowania interfejsów użytkownika dostosowujących się do różnych urządzeń. W tym przykładzie 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() sprawia, że element zachowuje szerokość 50% dopóki 50% nie będzie większe niż 46ch (na szerszych obszarach wyświetlania) lub mniejsze niż 23ch (na mniejszych obszarach 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, ale pamiętaj, że nie jest ona obsługiwana we wszystkich nowoczesnych przeglądarkach, więc upewnij się, że masz alternatywne rozwiązania i przeprowadź testy.
10. Zachowaj proporcje: aspect-ratio: <width> / <height>
Ostatnie narzędzie do tworzenia układu jest najbardziej eksperymentalne. Niedawno wprowadziliśmy ją w Chrome Canary w Chromium 84. Firefox aktywnie pracuje nad jej wdrożeniem, ale obecnie nie jest ona dostępna w żadnej stabilnej wersji przeglądarki.
Chcę jednak o tym wspomnieć, ponieważ jest to bardzo częsty problem. Chodzi po prostu o zachowanie formatu 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 odsetka. 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;
}
Ta funkcja jest jeszcze w fazie rozwoju, ale warto o niej wiedzieć, ponieważ rozwiązuje wiele problemów, z którymi sami często się zmagamy, 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.