Grid Container

CSS Grid Layout + Custom Elements v1 + Shadow DOM v1

<grid-container gutter="1rem"
                areas="
                      'a a a'
                      'a a a'
                      'a a a'
                      'b b e'
                      'c c f'
                      'd d .'
                      'g h h'
                      'g h h'
                      'g i i'
                      'g . .'
                      'j j j'
                      'j j j'
                      'j j j'
                      '. . .'
                      'k k k';
                      'a a a b b e'
                      'a a a c c f'
                      'a a a d d .'
                      'g . . . . .'
                      'g h h j j j'
                      'g h h j j j'
                      'g i i j j j'
                      '. . . . . .'
                      'k k k k k k' @ (min-width: 30em);
                      '. a a a a b b b e .'
                      '. a a a a c c c f .'
                      '. a a a a d d d . .'
                      '. g . . . . . . . .'
                      '. g h h h . j j j .'
                      '. g h h h . j j j .'
                      '. g i i i . j j j .'
                      '. . . . . . . . . .'
                      'k k k k k k k k k k' @ (min-width: 48em);
                      '. a a a a a b b b e f .'
                      '. a a a a a c c c . . .'
                      '. a a a a a d d d . . .'
                      '. g . . . . . . . . . .'
                      '. g h h h h . j j j . .'
                      '. g h h h h . j j j . .'
                      '. g . i i i . j j j . .'
                      '. . . . . . . . . . . .'
                      'k k k k k k k k k k k k' @ (min-width: 67.5em);">
  <grid-item area="a">a</grid-item>
  <grid-item area="b">b</grid-item>
  <grid-item area="c">c</grid-item>
  <grid-item area="d">d</grid-item>
  <grid-item area="e">e</grid-item>
  <grid-item area="f">f</grid-item>
  <grid-item area="g">g</grid-item>
  <grid-item area="h">h</grid-item>
  <grid-item area="i">i</grid-item>
  <grid-item area="j">j</grid-item>
  <grid-item area="k">k</grid-item>
</grid-container>

<grid-container gutter="5vmin"
                areas="'first second .'
                       'first third third'">
  <grid-item area="first">First</grid-item>
  <grid-item area="second">Second</grid-item>
  <grid-item area="third">Third</grid-item>
  <grid-item row="first-end"
             column="second-end">
    Fourth
  </grid-item>
</grid-container>

Reference

Attributes

Areas

Creates a grid template using named grid-items

<grid-container gutter="1rem"
                areas="
                'a a a a a a a a a b b b'
                'a a a a a a a a a c c c'
                '. . . . . . . . . c c c'
                '. . . . d d d d . . . .'
                ">
  <grid-item area="a">a</grid-item>
  <grid-item area="b">b</grid-item>
  <grid-item area="c">c</grid-item>
  <grid-item area="d">d</grid-item>
</grid-container>

Grid

Creates a grid template using named grid-items. Specifies dimensions for rows and columns

<grid-container gutter="1rem"
                grid="
                  'a    b' minmax(100px, 1fr)
                  'c    b' 2fr
                / auto 70vw
                ">
  <grid-item area="a">a</grid-item>
  <grid-item area="b">b</grid-item>
  <grid-item area="c">c</grid-item>
</grid-container>

<grid-container gutter="20vmin 2vw"
                grid="
                  'a   b   d' 1fr
                  'c   b   .' 2fr
                / 3fr 3fr 1fr
                ">
  <grid-item area="a">a</grid-item>
  <grid-item area="b">b</grid-item>
  <grid-item area="c">c</grid-item>
  <grid-item area="d"
            style="position: sticky; top: 0;">sticky</grid-item>
</grid-container>

<grid-container gutter="16px"
                grid="auto-flow 50px / repeat(auto-fill, 300px)">
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

Gutter

Specifies all gutters, or gutter between rows and gutter between columns separately

<grid-container gutter="16px"
                areas="
                'a b'
                'c d'
                ">
  <grid-item area="a">a</grid-item>
  <grid-item area="b">b</grid-item>
  <grid-item area="c">c</grid-item>
  <grid-item area="d">d</grid-item>
</grid-container>

<grid-container gutter="5vh 10vw"
                areas="
                'a b'
                'c d'
                ">
  <grid-item area="a">a</grid-item>
  <grid-item area="b">b</grid-item>
  <grid-item area="c">c</grid-item>
  <grid-item area="d">d</grid-item>
</grid-container>

Media Queries

Declarative Media Queries

<grid-container gutter="
                5px;
                20px @ (min-width: 30em)"
                areas="
                'a b'
                'c d';
                'a a a a a a a a a b b b'
                'a a a a a a a a a c c c'
                '. . . . . . . . . c c c'
                '. . . . d d d d . . . .'
                @ (min-width: 30em);
                'a a a a a a b b b b b b'
                'a a a a a a . . c c c c'
                '. . . . . . . . c c c c'
                '. . d d d d d d d d . .'
                @ (min-width: 48em)
                ">
   <grid-item area="a">a</grid-item>
   <grid-item area="b">b</grid-item>
   <grid-item area="c">c</grid-item>
   <grid-item area="d">d</grid-item>
</grid-container>

<grid-container gutter="5vmin"
                areas="'first second .'
                       'first third third'">
  <grid-item area="first">First</grid-item>
  <grid-item area="second">Second</grid-item>
  <grid-item area="third">Third</grid-item>
  <grid-item row="first-end;
                  first-start @ (min-width: 48em)"
             column="second-end">
    Fourth
  </grid-item>
</grid-container>