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-grid>

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-grid>
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-grid>
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-grid>

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 removes the default 30px gap between elements
  • 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