CSS Subgrid выравнивает элементы по нескольким рядам ⇐ CSS

[Anonymous]

Я пытаюсь создать сетку карт, в которой элементы (заголовок, контент, кнопка) идеально выравниваются на всех картах, даже в разных рядах. В то время как CSS Subgrid работает в одном ряду, я не могу получить элементы, чтобы выровнять по нескольким рядам. < /P>
Пример: < /p>

• a 3x3 сетка карт < /p>
  < /li>
  Каждая карта имеет 3 элемента: титул, и кнопку < /li>
  . /> Все разделы содержимого должны выравниваться и расширяться на основе самого большого контента < /p>
  < /li>
  < /ol>
  .Grid_Container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  }
  
  .Grid_Item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  }
  < /code>
  
  
  Title
  Content
  Button
  
  {/* Repeated for 9 cards */}
  
  < /code>
  
  
  As you can see on the image, the alignment of the items using CSS subgrid is working fine PER row. However, I would like to align it based on all the rows meaning:
  If any card has:
  
  A tall title: all titles in all cards should expand to the tallest title
• Tall content: all content sections should expand to the tallest section
• A tall button: all button sections should expand to the tallest button.

So I can create cards that have exactly the same layout.

Подробнее здесь: https://stackoverflow.com/questions/791 ... tiple-rows