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.