Grid

CSS Grid is a two-dimensional layout system that arranges elements into rows and columns at the same time using grid-template-columns and grid-template-rows , making it ideal for page layouts, dashboards, and any design built on a real grid.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Think of Grid like a spreadsheet: You define rows AND columns, then place items in specific cells. Flexbox is like a single row or column; Grid is the whole table!

CSS Grid is a powerful two-dimensional layout system that allows you to create complex layouts with rows and columns. It's perfect for page layouts, galleries, and structured content.

Define your column structure with flexible options.

Make items span multiple columns or rows for complex layouts.

Create intuitive layouts by naming areas - perfect for page structure!

Create responsive grids without media queries!

You now understand CSS Grid — the most powerful layout system in CSS. Key takeaways:

Practice quiz

How is CSS Grid best described compared to Flexbox?

  • A one-dimensional system for a single row or column
  • A system only for centering single elements
  • A two-dimensional system that controls rows and columns at the same time
  • A replacement for the HTML <table> element only

Answer: A two-dimensional system that controls rows and columns at the same time. Grid is two-dimensional, arranging items into rows and columns simultaneously.

What does grid-template-columns: repeat(3, 1fr) create?

  • Three equal-width flexible columns that share the available space
  • Three columns each exactly 1 pixel wide
  • One column repeated three times vertically
  • Three rows of equal height

Answer: Three equal-width flexible columns that share the available space. repeat(3, 1fr) makes three columns that each take an equal fraction of the free space.

What does the fr unit represent in CSS Grid?

  • A fixed number of pixels
  • A font-relative size like em
  • A percentage of the viewport width
  • A fraction of the available free space in the grid container

Answer: A fraction of the available free space in the grid container. fr is a fractional unit representing a share of the remaining free space in the grid.

Which declaration makes a grid item span two columns?

  • grid-span: 2;
  • grid-column: span 2;
  • column-count: 2;
  • grid-columns: 2;

Answer: grid-column: span 2;. grid-column: span 2 makes the item occupy two column tracks.

What does grid-template-areas let you do?

  • Name regions of the layout and place items by referencing those names
  • Automatically import images into the grid
  • Define the maximum number of rows allowed
  • Set the gap between items

Answer: Name regions of the layout and place items by referencing those names. grid-template-areas names regions so items can be placed with grid-area by name.

Which combination creates a responsive grid without media queries?

  • repeat(3, 100px)
  • grid-column: span 2
  • repeat(auto-fit, minmax(250px, 1fr))
  • display: inline-grid

Answer: repeat(auto-fit, minmax(250px, 1fr)). repeat(auto-fit, minmax(250px, 1fr)) lets columns reflow automatically as space changes.

What does the gap property control in a grid?

  • The outer margin of the grid container
  • The space between rows and columns of the grid
  • The padding inside each grid item
  • The number of columns

Answer: The space between rows and columns of the grid. gap sets the spacing between grid tracks (both rows and columns).

Which declaration turns an element into a grid container?

  • display: block;
  • position: grid;
  • layout: grid;
  • display: grid;

Answer: display: grid;. display: grid makes the element a grid container so its children become grid items.

Which property is used to define the explicit row tracks of a grid?

  • grid-rows
  • grid-template-rows
  • row-template
  • grid-row-gap

Answer: grid-template-rows. grid-template-rows defines the explicit row track sizes of the grid.

Which is the recommended general rule for choosing between Grid and Flexbox?

  • Use Grid for components and Flexbox for page structure
  • Always use Grid and never use Flexbox
  • Use Flexbox for components and Grid for overall page structure
  • They are interchangeable with no difference

Answer: Use Flexbox for components and Grid for overall page structure. A common rule of thumb: Flexbox for one-dimensional components, Grid for two-dimensional page structure.