CSS Grid, Table và nhiều thứ có sẵn cho website W3AMP

 <div class="card">
   <header>
     <h4>Card title</h4>
   </header>
   <p>content inside card content inside 
   card content inside card content inside card </p>
   <footer class="is-right">
     <a class="button primary">Submit</a>
     <a class="button">Cancel</a>
   </footer>
 </div>
 

<span class=badge>Badge..</span>

<span class=tag>Tag..</span>

<span class="tag" style="background:purple;color:violet">tag</span>

<a class="button">Default</a>

<a class="button primary">Primary</a>

<a class="button secondary">Secondary</a>

<a class="button dark">Dark</a>

<a class="button error">Error</a>

<a class="button success">Success</a>

<a class="button outline">Outline</a>

<a class="button outline primary">Primary outline</a>

<a class="button outline secondary">Secondary outline</a>

<a class="button outline dark">Dark outline</a>

<a class="button clear">Clear</a>

<button type="button" class="button primary icon">New file 
   <img src="https://icongr.am/feather/file.svg?size=16&color=ffffff">
 </button>

<button type=submit>Default button</button>

 <nav class="tabs is-full">
   <a>Tab 1</a>
   <a class="active">Tab 2</a>
   <a>Tab 3</a>
 </nav> 	

 <details>
     <summary>Read more</summary>
     <p>Lorem ipsum dolor sit amet, 
 	consectetur adipiscing elit. 
 	Donec viverra nec nulla vitae mollis.
     </p>
  </details>
	 	

 <details class=dropdown>
 <summary class="button outline">My Profile</summary>
 <div class=card>
   <p><a href="#">Edit</a></p>
   <p><a href="#">Alerts <span class=tag>3</span></a></p>
   <hr/>
   <p><a href="#" class=text-error>Logout</a></p>
 </div>
 </details>
 <details class=dropdown>
 <summary class="button outline">Login</summary>
   <form class="card row">
    <input class=col-12 placeholder=username>
    <input class=col-12 placeholder=password type=password>
    <footer class=is-right>
     <a class="button clear">Sign up</a>
      <button type=submit>Sign in</button>
    </footer>
   </form>
 </details>
 	

Flexible grid

A simple way to build flexible responsive columns:

• Add a .row container
• Add as many .col elements as you want

Each column will have an equal width, in a row. There is no restriction on number of columns, but it is recommended not to add more than 12 columns in a row.

 <div class="row">
     <div class="col">
       <div class="card">.col</div>
     </div>
 </div>
 
 <div class="row">
  <div class="col">
 	<div class="card">.col</div>
  </div>
  <div class="col">
 	<div class="card">.col</div>
  </div>
  <div class="col">
 	<div class="card">.col</div>
  </div>
 </div>
 	

Sized

You can also specify the size of the columns

• Add a .row container
• Add a .col-n child where n can be from 1 to 12

Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use .col-4.

 <div class="row">
   <div class="col-1"> .col-1 </div>
   <!-- repeat 11 times -->
 </div>
 <div class="row">
   <div class="col-4"> .col-4 </div>
   <!-- repeat twice -->
 </div>
 <div class="row">
   <div class="col-12"> .col-12 </div>
 </div>
 	

Responsive grids:

We now have responsive grids that work based on device width.

• All columns are 100% for device width < 600px
• .col and .col-N for all device sizes >= 600px
• .col-N-md for >= 900px sizes
• .col-N-lg for >= 1200px sizes

  <div class="row">
 <div class="col-12 col-6-md col-4-lg">
   <div class="card">.col-12.col-6-md.col-4-lg</div>
 </div>
 <div class="col-6 col-3-md col-4-lg">
   <div class="card">.col-6.col-3-md.col-4-lg</div>
 </div>
 <div class="col-6 col-3-md col-4-lg">
   <div class="card">.col-6.col-3-md.col-4-lg</div>
 </div>
 </div>
 <div class="row">
 <div class="col col-6-lg">
   <div class="card">.col.col-6-lg</div>
 </div>
 <div class="col col-3-lg">
   <div class="card">.col.col-3-lg</div>
 </div>
 <div class="col col-3-lg">
   <div class="card">.col.col-3-lg</div>
 </div>
 </div>
 	

Mix-n-Match

You can use a combination of flexible and sized columns.

When using a combination, the sized width column takes the size specified and the remaining is filled in by the flexible column.

 <div class="row">
     <div class="col-2">
       <div class="card">.col-2</div>
     </div>
     <div class="col-2">
       <div class="card">.col-2</div>
     </div>
     <div class="col">
       <div class="card">auto</div>
     </div>
     <div class="col-3">
       <div class="card">.col-3</div>
     </div>
   </div>
   <div class="row">
     <div class="col-10">
       <div class="card">.col-10</div>
     </div>
     <div class="col">
       <div class="card">auto</div>
     </div>
   </div>
   <div class="row">
     <div class="col">
       <div class="card">auto</div>
     </div>
     <div class="col">
       <div class="card">auto</div>
     </div>
     <div class="is-full-width"></div>
     <div class="col">
       <div class="card">auto</div>
     </div>
     <div class="col">
       <div class="card">auto</div>
     </div>
   </div>
	 	

Reverse Direction

Add .reverse to the .row to reverse the column direction.

 <div class="row reverse">
     <div class="col-6">
       <div class="card">.col-6</div>
     </div>
     <div class="col-3">
       <div class="card">.col-3</div>
     </div>
     <div class="col-3">
       <div class="card">.col-3</div>
     </div>
 </div>