Flip the switches on the container and on individual items and watch the layout respond. When it looks right, copy the CSS or the matching Tailwind classes.
.container {
display: flex;
gap: 12px;
}<div class="flex gap-[12px]"> <div class="">1</div> <div class="">2</div> <div class="">3</div> </div>
Pyalm designs and builds fast, conversion-focused websites in Next.js — the same stack these tools run on. If you'd rather have it built than fiddle with CSS, talk to us.
Flexbox lays children out along one axis (a row or a column), distributes spare space with justify-content, aligns items on the cross axis with align-items, and lets each item grow or shrink with the flex shorthand.
display:flex, flex-direction, gap, justify-content and align-items cover most layouts. Add flex-wrap for responsive rows of cards, and flex:1 on an item to make it fill the remaining space.
📖 Read the full guide: CSS Flexbox Cheat Sheet: Every Property with Examples
Write HTML with Tailwind CSS classes and see it render live — with starter templates.
Design layered CSS box shadows visually and copy the CSS or Tailwind class.
Generate harmonious colour palettes, lock the ones you like, extract colours from an image and export as CSS or Tailwind.
Use flexbox for one-dimensional layouts — a nav bar, a row of buttons, a card's internals. Use CSS grid when you need rows and columns aligned together, such as a page layout or gallery.
It only distributes free space. If items already fill the container (or an item has flex-grow), there's no space left to distribute.