AlpaKit / design / CSS Flexbox & Grid Layout Generator

CSS Flexbox & Grid Layout Generator

Visually configure and preview CSS Flexbox and Grid grid layouts, view animations, and copy CSS code.

Items

Flex Direction

Justify Content (Main Axis)

Align Items (Cross Axis)

Flex Wrap

Gap Spacing 12px

Live Preview Container

CSS Code

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

HTML Code

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>