Moderno sistema de diseño de cuadrícula CSS-CSSGridSys

Vista prévia

Descripción

CSSGridSys es una pequeña biblioteca de CSS que se utiliza para crear responsive, multiplataforma, de 12 columnas diseño de cuadrícula para el diseño web moderno.

Fuertemente basado en el CSS Grid layout .

Funcionamiento

Descargue e importe la hoja de estilos gridsys. CSS en la página.

<link rel="stylesheet" href="css/gridsys.css">

Cree un diseño de cuadrícula básico.

<section class="grid main s-col-six m-col-twelve">

<div class="s-col-six m-col-twelve">a<p class="mob">6</p><p class="nomob">12</p></div>

<div class="">


b<p class="mob">1</p><p class="nomob">1</p>

</div>

<div class="s-col-five m-col-eleven">


c<p class="mob">5</p><p class="nomob">11</p>

</div>

<div class="s-col-two m-col-two">


d<p class="mob">2</p><p class="nomob">2</p>

</div>

<div class="s-col-four m-col-ten">


e<p class="mob">4</p><p class="nomob">10</p>

</div>

<div class="s-col-three m-col-three">


f<p class="mob">3</p><p class="nomob">3</p>

</div>

<div class="s-col-three m-col-nine">


g<p class="mob">3</p><p class="nomob">9</p>

</div>

<div class="s-col-three s-offset-one m-col-four m-offset-zero">


h<p class="mob">3, offset 1</p><p class="nomob">4</p>

</div>

<div class="s-col-three s-offset-two m-col-eight m-offset-zero">


i<p class="mob">3, offset 2</p><p class="nomob">8</p>

</div>

<div class="s-col-three s-offset-three m-col-five m-offset-zero">


j<p class="mob">3, offset 3</p><p class="nomob">5</p>

</div>

<div class="s-col-six m-col-seven">


k<p class="mob">6</p><p class="nomob">7</p>

</div>

<div class="s-col-six m-col-six">


l<p class="mob">6</p><p class="nomob">6</p>

</div>

<div class="s-col-six m-col-six">


m<p class="mob">6</p><p class="nomob">6</p>

</div>
</section>

El desplazamiento también se admite.

<section class="grid main s-col-six m-col-twelve">

<div class="s-col-six m-col-six m-offset-one">


n<p class="mob">6</p><p class="nomob">6, offset 1</p>

</div>

<div class="s-col-six m-col-six m-offset-two">


o<p class="mob">6</p><p class="nomob">6, offset 2</p>

</div>

<div class="s-col-six m-col-six m-offset-three">


p<p class="mob">6</p><p class="nomob">6, offset 3</p>

</div>

<div class="s-col-six m-col-six m-offset-four">


q<p class="mob">6</p><p class="nomob">6, offset 4</p>

</div>

<div class="s-col-six m-col-six m-offset-five">


r<p class="mob">6</p><p class="nomob">6, offset 5</p>

</div>

<div class="s-col-six m-col-six m-offset-six">


s<p class="mob">6</p><p class="nomob">6, offset 6</p>

</div>
</section>