Documentation and examples for css grid: Google AMP Grid Layout.
<div class="container">
<div class="row">
<div class="col-1">...</div>
</div>
<div class="row">
<div class="col-2">...</div>
</div>
<div class="row">
<div class="col-3">...</div>
</div>
<div class="row">
<div class="col-4">...</div>
</div>
<div class="row">
<div class="col-5">...</div>
</div>
<div class="row">
<div class="col-6">...</div>
</div>
<div class="row">
<div class="col-7">...</div>
</div>
<div class="row">
<div class="col-8">...</div>
</div>
<div class="row">
<div class="col-9">...</div>
</div>
<div class="row">
<div class="col-10">...</div>
</div>
<div class="row">
<div class="col-11">...</div>
</div>
<div class="row">
<div class="col-12">...</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
</div>
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">...</div>
<div class="col-5">...</div>
<div class="col">...</div>
</div>
<div class="row">
<div class="col">...</div>
<div class="col-7">...</div>
<div class="col">...</div>
</div>
<div class="row">
<div class="col">...</div>
<div class="col-3">...</div>
<div class="col">...</div>
<div class="col-2">...</div>
</div>
</div>
This Google AMP grid framework includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.
BreakpointsFor grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column.
<div class="container">
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
<div class="row">
<div class="col-8">...</div>
<div class="col-4">...</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">...</div>
<div class="col-sm-4">...</div>
</div>
<div class="row">
<div class="col-sm">...</div>
<div class="col-sm">...</div>
<div class="col-sm">...</div>
</div>
<div class="row">
<div class="col-sm">...</div>
<div class="col-sm">...</div>
<div class="col-sm">...</div>
<div class="col-sm">...</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-4">...</div>
<div class="col-8">...</div>
</div>
<div class="row">
<div class="col col-md-3">...</div>
<div class="col-6 col-md-9">...</div>
</div>
<div class="row">
<div class="col-6 col-md-4">...</div>
<div class="col-6 col-md-4">...</div>
<div class="col-6 col-md-4">...</div>
</div>
</div>