Układy startowe siatki CSS - CSS-Tricks

To jest zbiór początkowych szablonów układów i wzorców korzystających z siatki CSS. Chodzi o to, aby pokazać, co ta technika jest w stanie zrobić i zapewnić punkt wyjścia, który można ponownie wykorzystać do innych projektów.

Pamiętaj, że obsługa siatki przez przeglądarki jest dobra, ale wymaga rozwiązań awaryjnych dla starszych przeglądarek. Oznacza to, że zwykłe kopiowanie i wklejanie może nie być odpowiednie w niektórych przypadkach użycia.

Układ Świętego Graala

Stary klasyczny trójkolumnowy układ, w którym dwa paski boczne i kontener przechowujący kopię treści są umieszczone pomiędzy nagłówkiem i stopką o pełnej szerokości.

Elastyczny Święty Graal

Wszystko pozostaje nienaruszone, gdy szerokość rzutni zmienia się za pomocą kontenera z płynną zawartością.

Zobacz Pen CSS Grid - Holy Grail 2 autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Responsywny Święty Graal

Po zawężeniu widocznego obszaru rzeczy układają się w stos.

Zobacz siatkę Pen CSS: Holy Grail Layout - Responsive autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

2-kolumny z nagłówkiem i stopką

Klasyczny układ bloga, w którym jedna kolumna jest przeznaczona na post, a druga na pasek boczny.

Elastyczne 2 kolumny

Układ staje się niewyraźny, gdy rzutnia staje się wąska, ale układ pozostaje na swoim miejscu.

Zobacz Pen CSS Grid: Header, Footer with 2-Column (Flexible) by Geoff Graham (@geoffgraham) na CodePen.

Responsywne 2-kolumny

Rzeczy gromadzą się na mniejszych ekranach.

Zobacz Pen CSS Grid: Header, Footer with 2-Column (Responsive) autorstwa Geoff Graham (@geoffgraham) na CodePen.

Równomiernie rozmieszczone, dopasowane zgodnie z potrzebami

Elementy wpływają do układu i kończą się, gdy ich już nie ma.

Zobacz tabelę Pen CSS Grid równomiernie rozłożoną, tylu, ile potrzeba autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Artykuł z Breakout

Świetna sztuczka Tylera Stickiego, która pozwala elementowi wyrwać się z siatki. Rachel Andrew szczegółowo wyjaśnia, jak nazwane linie siatki pozwalają na to.

Zobacz Pen CSS Grid: Article with Breakout autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Kalendarz podstawowy

Jak można się spodziewać, Siatka CSS działa dobrze w przypadku siatki kalendarza.

Zobacz Pen CSS Grid: Calendar autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Zarząd monopolu

Proste odtworzenie planszy do gry. Jen Simmons ma słodkie demo wraz ze stylami Monpoly.

Zobacz Pen CSS Grid: Monopoly Board autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Nasi partnerzy ds. Uczenia się Frontend Masters

Potrzebujesz szkolenia z zakresu programowania front-end?

Frontend Masters to najlepsze miejsce, aby to zdobyć. Prowadzą kursy na temat wszystkich najważniejszych technologii front-end, od Reacta po CSS, od Vue do D3 i nie tylko z Node.js i Full Stack.