Generator CSS Grid

Wizualny kreator CSS Grid.

Szablony:

Kolumny (3)

Wiersze (2)

Odstep kolumn: 16pxOdstep wierszy: 16px

WyrownajWyrownaj

Podglad

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.grid-item {
  padding: 16px;
  background: #e2e8f0;
  border-radius: 8px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Darmowy CSS Grid Generator

Tworzenie ukladow CSS Grid wizualnie.

Referencja

Wlasciwosc	Opis	Przyklad
grid-template-columns	Kolumny	1fr 1fr 1fr
grid-template-rows	Wiersze	auto 1fr auto
gap	Odstep	16px
justify-items	Poziomo	stretch
align-items	Pionowo	stretch

FAQ

Co to CSS Grid?

CSS Grid to dwuwymiarowy system ukladow.

Grid vs Flexbox?

Grid jest 2D, Flexbox 1D.

Co oznacza "fr"?

"fr" to ulamek dostepnej przestrzeni.

Wsparcie przegladarek?

Tak, wszystkie nowoczesne przegladarki.

Grid i Flexbox razem?

Tak, swietnie sie uzupelniaja.

Powiazane narzedzia

CSS Flexbox Generator CSS Gradient Generator CSS Shadow Generator Em/Px Converter

𝕏 Twitter in LinkedIn

Oceń to narzędzie

3.6 / 5 · 47 ocen

More Tools

📐CSS Flexbox Generator 🌈CSS Gradient Generator 📐Em/Px Converter

Bądź na bieżąco

Otrzymuj cotygodniowe porady i nowe narzędzia.

Bez spamu. Zrezygnuj kiedy chcesz.

Enjoy these free tools?

☕Buy Me a Coffee