CSS Grid Layout

Question 1

What CSS property enables Grid layout on an element?

Answer 1

display

Question 2

What does grid-template-columns do?

Answer 2

It defines the number and size of the columns in the grid.

Question 3

What happens if there are more grid items than defined columns/rows?

Answer 3

The grid creates additional implicit rows or columns to fit them.

Question 4

How do you make an item span two columns?

Answer 4

Use grid-column: span 2; or grid-column: 1 / 3;

Question 5

What is the shorthand for grid-row and grid-column?

Answer 5

grid-area: row-start / column-start / row-end / column-end;

Question 6

What’s the difference between auto-fill and auto-fit?

Answer 6

auto-fill keeps empty tracks; auto-fit collapses them if empty.

Question 7

What does this CSS do?

grid-template-columns: repeat(3, 1fr);

Answer 7

Creates 3 equal-width columns. Creates 3 equal-width columns.

Question 8

What is the default value of justify-items and align-items?

Answer 8

stretch — items fill the entire cell by default.

Question 9

What does this do?

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Answer 9

Creates responsive columns that are at least 200px wide and grow to fill available space, wrapping when needed.

Question 10

How do you position an item at column 2, row 3?

Answer 10

grid-column: 2; grid-row: 3;
or
grid-area: 3 / 2;

Question 11

How can you make the center column twice as wide as the others in a 3-column layout?

Answer 11

grid-template-columns: 1fr 2fr 1fr;

Question 12

Does setting margin on a grid item affect gap?

Answer 12

No, gap is separate from margins and doesn’t collapse with them.

Question 13

When would you use min-content or max-content in a grid?

Answer 13

Use min-content to shrink to the smallest size without overflow; max-content to expand to the largest natural size of the content.

Question 14

Make a 3-column layout with equal-width columns.

Answer 14

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Question 15

Make the first item span 2 columns.

Answer 15

.item1 {
  grid-column: span 2;
}

Question 16

How to create columns that are at least 150px wide and auto-wrap?

Answer 16

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

Question 17

Imagine there is a grid, how can you place .item3 in the second column and third row.

Answer 17

.item3 {
  grid-column: 2;
  grid-row: 3;
}

Question 18

Create a .container grid and nest another grid inside .card.

Answer 18

<div class="container">
  <div class="card">
    <h3>Title</h3>
    <p>Content</p>
    <button>Buy</button>
  </div>
</div>

Question 19

Use subgrid to align columns between parent and child.

Answer 19

.parent {
  display: grid;
  grid-template-columns: 100px 1fr 1fr;
}
.child {
  display: grid;
  grid-column: 1 / 4;
  grid-template-columns: subgrid;
}

Question 20

Is this a valid declaration?

header {
  grid-area: 1 / 1 / 1 / 3;
}

Answer 20

Invalid — row-start equals row-end, so height is 0.