CodePark/ questions / Grid
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Grid

The grid container is 600px wide and its items hold little content. How wide are the two columns?

.grid {
  display: grid;
  width: 600px;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
}
190px and 380px

190px and 380px is right. fr (fraction) divides the space that is left after fixed sizes and gaps. 600 − 30 = 570px. Split 1:2, that gives 190px and 380px.

200px and 400px is the tempting wrong answer. It forgets that the browser subtracts the gap first.