Search code examples
csscss-grid

what tags are allowed as grid elements

this is a standard grid concept: 

.wrap{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
}

<div class='wrap'>
<div class='el'>lorem</div>
<div class='el'>ipsum</div>
<div class='el'>dolor</div>
</div>

I tried this: 

<div class='wrap'>
<img class='el' src='...' alt='img'>
<img class='el' src='...' alt='img'>
<img class='el' src='...' alt='img'>
</div>

And seems it works - images as grid elements

So my question is - what else can I use as grid elements - inputs, forms, video...

I suppose there are some restrictions but can't find any specification regarding this.

Solution

  • Never rendered svg elements cannot be used as grid items for sure.

    Other descendants of <svg> elements also probably can't be used, though I can't find any spec on those.

    For HTML elements, pretty much anything works as a grid item if you force it to generate a CSS box.