Get Started

Documentação

Get-started

Basic

Grid

Documentação

Get-started

Basic

Grid

Basis

This defines the default size of an element before the remaining space is distributed.

1
2
3 
<div class="container">
    <div class="basis1">
      ...
    </div>
    <div class="basis2">
      ...
    </div>
    <div class="basis3">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container">
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container center-center">
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container">
    <div class="flex basis1">
      ...
    </div>
    <div class="flex basis1">
      ...
    </div>
    <div class="flex basis1">
      ...
    </div>
    <div class="flex basis1">
      ...
    </div>
    <div class="flex basis1">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container wrap">
    <div class="flex basis2">
      ...
    </div>
    <div class="flex basis2">
      ...
    </div>
    <div class="flex basis2">
      ...
    </div>
    <div class="flex basis2">
      ...
    </div>
    <div class="flex basis2">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container wrap">
    <div class="flex basis3">
      ...
    </div>
    <div class="flex basis3">
      ...
    </div>
    <div class="flex basis3">
      ...
    </div>
    <div class="flex basis3">
      ...
    </div>
    <div class="flex basis3">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container wrap">
    <div class="flex basis4">
      ...
    </div>
    <div class="flex basis4">
      ...
    </div>
    <div class="flex basis4">
      ...
    </div>
    <div class="flex basis4">
      ...
    </div>
    <div class="flex basis4">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container wrap">
    <div class="flex basis5">
      ...
    </div>
    <div class="flex basis5">
      ...
    </div>
    <div class="flex basis5">
      ...
    </div>
    <div class="flex basis5">
      ...
    </div>
    <div class="flex basis5">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container wrap">
    <div class="flex basis6">
      ...
    </div>
    <div class="flex basis6">
      ...
    </div>
    <div class="flex basis6">
      ...
    </div>
    <div class="flex basis6">
      ...
    </div>
    <div class="flex basis6">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container wrap">
    <div class="flex basis7">
      ...
    </div>
    <div class="flex basis7">
      ...
    </div>
    <div class="flex basis7">
      ...
    </div>
    <div class="flex basis7">
      ...
    </div>
    <div class="flex basis7">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container wrap">
    <div class="flex basis8">
      ...
    </div>
    <div class="flex basis8">
      ...
    </div>
    <div class="flex basis8">
      ...
    </div>
    <div class="flex basis8">
      ...
    </div>
    <div class="flex basis8">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container wrap">
    <div class="flex basis9">
      ...
    </div>
    <div class="flex basis9">
      ...
    </div>
    <div class="flex basis9">
      ...
    </div>
    <div class="flex basis9">
      ...
    </div>
    <div class="flex basis9">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container wrap">
    <div class="flex basis10">
      ...
    </div>
    <div class="flex basis10">
      ...
    </div>
    <div class="flex basis10">
      ...
    </div>
    <div class="flex basis10">
      ...
    </div>
    <div class="flex basis10">
      ...
    </div>
  </div>
1 
<div class="container center-center">
      <div class="basis1">
           ...
      </div>
    </div>
1 
<div class="container center-center">
      <div class="basis2">
           ...
      </div>
    </div>
1 
<div class="container center-center">
      <div class="basis3">
           ...
      </div>
    </div>
1 
<div class="container center-center">
      <div class="basis4">
           ...
      </div>
    </div>
1 
<div class="container center-center">
      <div class="basis5">
           ...
      </div>
    </div>
1 
<div class="container center-center">
      <div class="basis6">
           ...
      </div>
    </div>
1 
<div class="container center-center">
      <div class="basis7">
           ...
      </div>
    </div>
1 
<div class="container center-center">
      <div class="basis8">
           ...
      </div>
    </div>
1 
<div class="container center-center">
      <div class="basis9">
           ...
      </div>
    </div>
1 
<div class="container center-center">
      <div class="basis10">
           ...
      </div>
    </div>
1 
<div class="container center-center">
      <div class="basis11">
           ...
      </div>
    </div>
1 
<div class="container center-center">
      <div class="basis12">
           ...
      </div>
    </div>