Equal columns

2 snippets in HTML & CSS

HCHTML & CSS

Flex Grow, Shrink, Basis

syntax

flex: grow shrink basis;
flex-grow: number;
flex-shrink: number;
flex-basis: size;

example

.sidebar {
  flex: 0 0 280px; /* fixed width, no grow or shrink */
}

.main-content {
  flex: 1; /* grow to fill remaining space */
}

.equal-columns > * {
  flex: 1 1 0%; /* equal width columns */
}

Note flex: 1 is shorthand for flex: 1 1 0%, meaning the item can grow and shrink and starts from zero base size. flex-basis sets the initial size before growing/shrinking. Using 0% basis makes items share space equally.

Repeat Function

HC · CSS Grid

syntax

grid-template-columns: repeat(count, size);

example

/* 4 equal columns */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Pattern: 100px then 1fr, repeated 3 times */
.dashboard {
  grid-template-columns: repeat(3, 100px 1fr);
}

Note repeat() avoids writing the same value many times. You can repeat patterns too: repeat(3, 1fr 2fr) produces six columns alternating between 1fr and 2fr.