CSS Flex & Grid Layout Generator

Choose Flexbox or Grid, adjust properties with dropdowns, and copy the generated CSS into your project.

Choose Flexbox or Grid and adjust properties. Copy the generated CSS.

flex-direction

flex-wrap

justify-content

align-items

gap

Generated CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 0.5rem;
}

Related tools

HTML/CSS Live Sandbox·
Data Structures Cheat Sheet·
Regex Playground·

Learn with Tagna.

Explore Tagna