HTML / CSS · KOD NA LICENCJI MIT

Układy siatki: responsywne kafelki

Responsywne kafelki. Edytuj treść i wygląd, a potem skopiuj kod.

Edytuj HTML, CSS i JS ↗ Otwórz konfigurator ↗

Gdzie wykorzystać ten przykład?

Siatki kart i responsywne sekcje. Wariant „Układy siatki: responsywne kafelki” możesz dopasować do kolorów i treści swojej strony.

Jak działa ten efekt?

Grid ustala kolumny, wiersze i odstępy. Poszczególne warianty różnią się proporcjami albo sposobem rozmieszczenia elementów.

Jak dodać go na stronę?

Otwórz przykład w edytorze i podmień tekst oraz kolory.
HTML wstaw w miejscu, w którym ma pojawić się element.
CSS przenieś do arkusza stylów swojej strony. Reguły body z podglądu dopasuj do własnego układu.
Sprawdź działanie na telefonie, klawiaturą i z własną treścią.

Na co zwrócić uwagę?

Nie ustawiaj sztywnej szerokości większej od ekranu. Przetestuj układ z mniejszą i większą liczbą elementów.

Co możesz zmienić w konfiguratorze?

Tekst przykładu, Kolor akcentu. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.

Gotowy kod: Układy siatki: responsywne kafelki

HTML

<div class="effect"><div class="grid-pack"><article><span>01</span><h3>Układy siatki</h3><p>Treść elementu 1</p></article><article><span>02</span><h3>Układy siatki</h3><p>Treść elementu 2</p></article><article><span>03</span><h3>Układy siatki</h3><p>Treść elementu 3</p></article><article><span>04</span><h3>Układy siatki</h3><p>Treść elementu 4</p></article><article><span>05</span><h3>Układy siatki</h3><p>Treść elementu 5</p></article><article><span>06</span><h3>Układy siatki</h3><p>Treść elementu 6</p></article></div></div>

CSS

*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.effect{width:100%;max-width:650px;color:#e95b30;text-align:center}.effect *{box-sizing:border-box}.effect button,.effect a{font:inherit}.effect button{cursor:pointer}.effect h2{font-size:clamp(25px,5vw,42px);line-height:1.2;margin:0 0 14px}.effect p{font-size:13px;color:#7c8c6d;margin:10px 0}.effect button:focus-visible,.effect a:focus-visible,.effect input:focus-visible{outline:3px solid #e95b30;outline-offset:5px}.effect{max-width:900px}.grid-pack{display:grid;gap:13px;text-align:left;grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr))}.grid-pack article{min-width:0;padding:20px;background:#fff;border:1px solid #e95b3033;border-radius:7px}.grid-pack h3{font-size:17px;line-height:1.3;margin:14px 0}.grid-pack span{font:11px monospace;color:#e95b30}.grid-pack p{font-size:10px}@media(max-width:500px){.grid-pack{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grid-pack article{grid-column:auto!important;grid-row:auto!important;padding:15px}}@media(max-width:330px){.grid-pack{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}

Podobne przykłady

Układy siatki: dwie równe kolumny ↗Układy siatki: trzy równe kolumny ↗Układy siatki: cztery równe kolumny ↗Układy siatki: auto-fit ↗Układy siatki: szeroka pierwsza karta ↗Układy siatki: bento pionowe ↗