Skip to content

Grid

Example#

preview

Code-example#

<measmatic-grid>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;">  </div>
</measmatic-grid>
<measmatic-divider></measmatic-divider>
<measmatic-grid nowrap>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
</measmatic-grid>
<measmatic-divider></measmatic-divider>
<measmatic-grid nowrap dynamic>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
</measmatic-grid>
<measmatic-divider></measmatic-divider>
<measmatic-grid vertikal>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
  <div style="width:333px; height:50px; background-color:#0086c0;"></div>
</measmatic-grid>
<measmatic-divider></measmatic-divider>
<measmatic-grid break-line-at="2">
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
</measmatic-grid>
<measmatic-divider></measmatic-divider>
<measmatic-grid break-line-every="3">
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
  <div style="width:50px; height:50px; background-color:#0086c0;"></div>
</measmatic-grid>

Measmatic-grid#

This custom-element will generate a grid to organize multiple Elements, e.g. multiple measmatic-card elements.

Structure 

<measmatic-grid>
    <div></div>
    <div></div>
</measmatic-card>

To break the grid and create a new line you can add manually a div-element with the class measmatic-grid__break. 

<measmatic-grid>
    <div></div>
    <div></div>
    <div class="measmatic-grid__break"></div>
    <div></div>
    <div></div>
</measmatic-card>
You can achieve the same by adding break-line-at as attribute with the number of the nth-child of the measmatic-grid as value.

<measmatic-grid break-line-at="2">
    <div></div>
    <div></div>
    <!--will break here-->
    <div></div>
    <div></div>
</measmatic-card>
If you want to break the grid every nth-child use break-line-every as attribute. 
<measmatic-grid break-line-every="2">
    <div></div>
    <div></div>
    <!--will break here-->
    <div></div>
    <div></div>
    <!--will break here-->
    <div></div>
    <div></div>
</measmatic-card>

Attributes

  • break-line-at will break the grid and create a new line at nth-child of grid
  • break-line-every will break the grid and create a new line at every nth-child of the grid
  • nogap default gap between elements is 30px horizontal and vertical
  • nowrap grid won't create a new column if elements are to big to fit into one line
  • vertical grid will be vertical orientated (default: horizontal)
  • dynamic grid-items will be sized dynamically