useful and new example on subgrids with documentation example

[Thibaultfq]

To leverage the subgrid utility in css (which came in tailwind 3.4), documentation on this feature can be expanded.

In fact, it can actually be used to address problems that have long been difficult or impossible to achieve using css only.
One example is to create a grid where sibling cells per row have the same or equal (minimum) height. This way, they start on at the same height in the grid. Problem definition is described in detail here: https://stackoverflow.com/questions/46816752/equal-height-of-elements-inside-grid-item-with-css-grid-layout/78281657#78281657

often, the 'cards' or blocks in such grid are created using a loop and their block of content have a dynamic height based on their (dynamic) contents (e.g. 1-3 sentences per header, body and footer). Having them start at the same height is nice, but before subgrid we couldn't style elements based on properties (height) is siblings.

The solution to this using subgrid in tailwind: https://play.tailwindcss.com/1e7mvOHZaC

<div class="grid grid-cols-3 gap-x-2 max-w-screen-lg">
  <div class="grid grid-rows-subgrid row-span-3  gap-y-2 rounded-lg bg-indigo-100 p-4 shadow-lg">
    <div class="p-4 rounded-lg border-2 border-indigo-900">Header</div>
    <div class="p-4 rounded-lg border-2 border-indigo-900">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, consequuntur voluptatum perferendis eum at sit aperiam non officia mollitia distinctio sint rem, laborum accusamus voluptate consequatur ratione. Quis, accusamus harum?
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis vel minus nam ipsum error aliquam modi rerum natus, a fugiat at saepe inventore, recusandae eaque voluptate atque dicta possimus earum?
    </div>
    <div class="p-4 rounded-lg border-2 border-indigo-900">Footer</div>
  </div>
    <div class="grid grid-rows-subgrid row-span-3  gap-y-2 rounded-lg bg-indigo-100 p-4 shadow-lg">
    <div class="p-4 rounded-lg border-2 border-indigo-900">Header that is longer than other headers. Other siblings will follow the longest header</div>
    <div class="p-4 rounded-lg border-2 border-indigo-900">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, consequuntur voluptatum perferendis eum at sit aperiam non officia mollitia distinctio sint rem, laborum accusamus voluptate consequatur ratione. Quis, accusamus harum?</div>
    <div class="p-4 rounded-lg border-2 border-indigo-900">Footer</div>
  </div>
    <div class="grid grid-rows-subgrid row-span-3  gap-y-2 rounded-lg bg-indigo-100 p-4 shadow-lg">
    <div class="p-4 rounded-lg border-2 border-indigo-900">Header</div>
    <div class="p-4 rounded-lg border-2 border-indigo-900">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, consequuntur voluptatum perferendis eum at sit aperiam non officia mollitia distinctio sint rem, laborum accusamus voluptate consequatur ratione. Quis, accusamus harum?</div>
    <div class="p-4 rounded-lg border-2 border-indigo-900">Footer that is longer than other headers. Other siblings will follow the longest footer.</div>
  </div>
</div>