SyntaxShelf

Equal columns

2 snippets in HTML & CSS

HCHTML & CSS

Flex Grow, Shrink, Basis

HC · Flexbox
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.

Frequently asked questions

How does HTML & CSS handle equal columns?
HTML & CSS covers this with 2 copy-ready snippets on this page. The "Flex Grow, Shrink, Basis" snippet in HTML & CSS uses `flex: grow shrink basis;`.
Which code does the HTML & CSS example use?
The "Flex Grow, Shrink, Basis" snippet uses `flex: grow shrink basis;`, from the Flexbox section of the HTML & CSS cheat sheet.
What other HTML & CSS snippets are shown for "equal columns"?
Besides "Flex Grow, Shrink, Basis", this page also shows "Repeat Function".
Is there anything to watch out for?
Yes. For "Flex Grow, Shrink, Basis": 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.

Browse all tasks by intent