Автоматически размещать элементы сетки в именованном столбце? ⇐ CSS

[Гость]

I have a simple 4 column grid where I want most of the content to fall within the named column area in the middle.

Is it possible to adjust the column span of a grid item so that they take 1fr and line up in a row, but still only within the central area?

• I would like to do this without adding additional wraps
• There are items not shown here that make use of the wider parts of the grid.
• There is a variable amount of items that may or may not have the 'small' class, and should remain in order.

HTML

Код: Выделить всё

   Item
   
Item
   
Item
  

CSS

Код: Выделить всё

.grid {   display:grid;   grid-template-columns:     [grid-start] 1fr     [content-start] 1fr 1fr [content-end]     1fr [grid-end]   ; } .grid p {   grid-column:content; } .grid .small {   grid-column:content / span 1; } 

So the grid would look something like this:




Источник: https://stackoverflow.com/questions/781 ... med-column