grid-template-columns/rows — CSS Technical Interview Questions & Answers

Defining a CSS Grid's tracks.

grid-template-columns/rows

  • Defining a CSS Grid's tracks.
  • CSS Grid is two-dimensional: rows and columns. display:grid; grid-template-columns: 1fr 1fr 1fr; three equal columns. repeat(auto-fit, minmax(240px, 1fr)) is a responsive gallery.
  • Use Grid for page layout (header / main / side). Flex for a single row of buttons.
  • Trap: Grid when a simple flex row was enough. Trap: fixed px columns that overflow the phone.

Technical Interview Tip: display:grid; grid-template-columns: 1fr 1fr;

Code Examples for grid-template-columns/rows

grid-template-columns/rows — working example

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  grid-template-columns: 200px 1fr;
}

.page > header { grid-area: header; }
.page > nav { grid-area: nav; }
.page > main { grid-area: main; }
.page > footer { grid-area: footer; }

@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
}

grid-template-columns/rows — grid is two-dimensional — columns and rows (and named areas) together.

How to Explain grid-template-columns/rows to an Interviewer

Flex vs Grid?

Flex = one line Grid = rows and columns