CSS Flexbox and CSS Grid are layout systems used to arrange elements on a web page. This cheat sheet helps students remember which properties belong to the container and which belong to the items. It is useful when building navigation bars, cards, galleries, forms, and full page layouts.
A quick reference prevents common layout errors and makes CSS easier to debug.
Key Facts
- Flexbox starts with display: flex; on the parent container and arranges child items along one main axis.
- The flex-direction property sets the main axis with row, row-reverse, column, or column-reverse.
- In Flexbox, justify-content aligns items along the main axis, and align-items aligns items along the cross axis.
- The flex shorthand uses flex: grow shrink basis;, such as flex: 1 1 200px; to allow an item to grow, shrink, and start at 200px.
- CSS Grid starts with display: grid; on the parent container and arranges child items in rows and columns.
- The rule grid-template-columns: repeat(3, 1fr); creates 3 equal-width columns.
- The gap property sets spacing between flex or grid items, such as gap: 16px; for a 16 pixel space.
- Use Flexbox for one-dimensional layouts in a row or column, and use Grid for two-dimensional layouts with rows and columns.
Vocabulary
- Flex Container
- A parent element with display: flex; that controls the layout of its direct child elements.
- Flex Item
- A direct child of a flex container that can be resized, aligned, or reordered by Flexbox properties.
- Main Axis
- The primary direction in a flex container, set by flex-direction.
- Grid Container
- A parent element with display: grid; that creates a row and column layout for its direct children.
- Grid Track
- A single row or column in a CSS Grid layout.
- fr Unit
- A flexible Grid unit that represents one fraction of the available space.
Common Mistakes to Avoid
- Putting flex or grid properties on the wrong element is incorrect because display: flex; and display: grid; belong on the parent container, while item sizing and placement often belong on the children.
- Using justify-content when you mean vertical alignment can be wrong because justify-content follows the main axis in Flexbox, which changes when flex-direction changes.
- Forgetting gap and using only margins can make spacing harder to manage because margins can collapse or create uneven outer edges.
- Using Flexbox for a full row-and-column page layout can become messy because Flexbox is mainly one-dimensional, while Grid is built for two-dimensional structure.
- Writing grid-template-columns: 3 1fr; is wrong because repeat syntax must be repeat(3, 1fr) or the values must be written as 1fr 1fr 1fr.
Practice Questions
- 1 A grid container uses grid-template-columns: repeat(4, 1fr);. How many equal-width columns will it create?
- 2 A flex container is 900px wide and has 3 items with flex: 1 1 0;. If there is no gap, how wide is each item?
- 3 A grid container uses grid-template-columns: 200px 1fr 1fr; and is 800px wide with no gap. How much width is shared by the two 1fr columns, and how wide is each one?
- 4 You are building a web page with a header, sidebar, main content area, and footer. Explain whether Flexbox or Grid is the better main layout tool and why.
Understanding CSS Flexbox & Grid Reference
A layout rule does more than place boxes in a visible pattern. The browser first works out each element’s content size, padding, border, margins, and available space. It then applies the layout rules to calculate final positions.
Grid is especially useful when parts of a design must line up even when they are not next to each other in the HTML. Grid lines provide a hidden coordinate system. An item can begin on one line and end on another, which lets a heading, image, and button occupy planned areas.
If content creates more rows or columns than were defined, the browser makes implicit tracks. These automatic tracks can cause surprising sizes, so they deserve attention during debugging.
Flex items have sizing rules that can feel less predictable at first. Their starting size may come from their content, a width rule, or their flex basis. After that, the browser shares unused room among items that are allowed to grow.
When the container becomes too narrow, it asks items that can shrink to give up space. Long words, large images, and code snippets can resist shrinking because of their minimum content size. This is why a card sometimes pushes outside its container even though its flex settings seem correct.
Setting a sensible minimum width, controlling image sizes, or allowing text to wrap can solve the real problem. A rule such as min-width zero is often needed on a flexible text area so long content can actually shrink.
Responsive layouts should respond to available space, not only to a list of device names. A grid can use flexible tracks with minimum sizes so cards naturally move onto new rows when there is not enough room. This often needs fewer media queries than a fixed number of columns.
Media queries still help when the design itself changes, such as moving a sidebar below an article or simplifying navigation. Keep the HTML order meaningful before changing visual placement.
A screen reader and keyboard user usually follow source order, not the order created by Grid placement or the Flexbox order property. Visual rearrangement can therefore make a page confusing even when it looks neat.
Good layout debugging starts by checking the parent element. Many mistakes happen because a rule was placed on a child when it belongs on the container, or because another CSS rule overrides it later. Browser developer tools can show the grid lines, track sizes, flex directions, padding, and computed values.
Turn on these overlays and inspect one box at a time. Check whether the box model is adding unexpected width through padding or borders. Check for fixed widths that block resizing.
Build small test layouts with colored outlines, then add content gradually. Real text of different lengths reveals problems that empty placeholder boxes hide. A layout is successful when it remains readable with narrow screens, wide screens, zoomed text, and imperfect content.