1

I have this code from a code snippet for CSS grid and found it really confusing.

grid-template-columns: [outer-start] 1fr [center-start] 1fr [center-end] 1fr [outer-end];

My doubt is, here will there be 3 columns or 4 columns?

kmg
  • 1,195
  • 3
  • 11
  • 14
  • there are 3 columns (this *names* the grid lines) - see https://www.w3.org/TR/css-grid-1/#named-lines – kukkuz Mar 27 '19 at 12:15
  • Then why 4 column names are given as: outer-start, center-start, center-end, outer-end ? – kmg Mar 28 '19 at 03:47
  • they are not column names, they are *grid line* names... if there are 3 columns then there are 4 grid lines – kukkuz Mar 28 '19 at 03:48

1 Answers1

0

There will be 3 columns and 4 column-grid-lines. In terms of explicit column numbers and sizing

grid-template-columns: [outer-start] 1fr [center-start] 1fr [center-end] 1fr [outer-end];

is equivalent to

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

The thigs inside [ and ] are gird line names. I suggest you to read this MDN article for an exhaustive explanation. These grid line names then later can be used to position grid-items, e.g.

.grid-item1 {
  grid-column-start: center-start;
  grid-column-end: outer-end;
}
user31782
  • 7,087
  • 14
  • 68
  • 143