0.5 KB responsive CSS Grid Framework-SMART CSS GRID

Vista prévia

Descripción

SMART CSS GRID es un marco de cuadrícula CSS ultraligero (~ 0.5 KB minificado) para crear un diseño de cuadrícula adaptable, flexible, fluido y de 12 columnas para su aplicación web moderna.

Funcionamiento

Importe la hoja de estilos principal de SMART CSS GRID en el documento HTML.

<link rel="stylesheet" href="smart-grid.css">

Cree un sistema de rejilla básico con las siguientes clases CSS:

<div class="box one">1</div>
<div class="box one">2</div>
<div class="box one">3</div>
<div class="box one">4</div>
<div class="box one">5</div>
<div class="box one">6</div>
<div class="box one">7</div>
<div class="box one">8</div>
<div class="box one">9</div>
<div class="box one">10</div>
<div class="box one">11</div>
<div class="box one">12</div>

<div class="box two">1</div>
<div class="box two">2</div>
<div class="box two">3</div>
<div class="box two">4</div>
<div class="box two">5</div>
<div class="box two">6</div>

<div class="box three">1</div>
<div class="box three">2</div>
<div class="box three">3</div>
<div class="box three">4</div>

<div class="box four">1</div>
<div class="box four">2</div>
<div class="box four">3</div>

<div class="box six">1</div>
<div class="box six">2</div>

<div class="box twelve">1</div>

También puede fusionar las filas como estas:

<div class="box four merge-three-rows">You can also merge rows</div>
<div class="box four">four</div>
<div class="box four">four</div>