NumbersGrid Lines

CSS

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

Tailwind CSS

<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <!-- Grid items here -->
</div>

📐

The fr unit distributes available space. 1fr 2fr means the second column gets twice the space of the first.

📍

Name grid areas with grid-template-areas for semantic layouts. Items can then use grid-area to place themselves.

📱

Use auto-fit to collapse empty tracks and expand items. Use auto-fill to keep empty tracks for consistent sizing.

📏

minmax(min, max) sets a size range. minmax(200px, 1fr) means at least 200px but can grow with available space.

Need Professional Web Development?

Brix340 offers custom website design, responsive layouts, and modern CSS solutions for your business.

CSS Grid Generator