Marco ligero adaptable CSS Grid Framework-BackPack. CSS

Vista prévia

Descripción

BackPack. CSS es un pequeño marco de cuadrícula CSS que le ayuda a generar una respuesta completa, basada en 12 columnas < a href = "https://wikicss.com/tag/grid-layout/" > Grid layout para el diseño web moderno.

Funcionamiento

Descargue e importe la versión minimizada de BackPack. CSS en el documento.

<link rel="stylesheet" href="dist/backpack.min.css">

La estructura HTML para crear un diseño de cuadrícula de la siguiente manera:

<div class="bag grid-sec">

<div class="chain grid-row">


<div class="one pocket"></div>


<div class="one pocket"></div>


<div class="one pocket"></div>


<div class="one pocket"></div>


<div class="one pocket"></div>


<div class="one pocket"></div>


<div class="one pocket"></div>


<div class="one pocket"></div>


<div class="one pocket"></div>


<div class="one pocket"></div>


<div class="one pocket"></div>


<div class="one pocket"></div>

</div>

<div class="chain grid-row">


<div class="two pockets"></div>


<div class="two pockets"></div>


<div class="two pockets"></div>


<div class="two pockets"></div>


<div class="two pockets"></div>


<div class="two pockets"></div>

</div>

<div class="chain grid-row">


<div class="three pockets"></div>


<div class="three pockets"></div>


<div class="three pockets"></div>


<div class="three pockets"></div>

</div>

<div class="chain grid-row">


<div class="four pockets"></div>


<div class="four pockets"></div>


<div class="four pockets"></div>

</div>

<div class="chain grid-row">


<div class="six pockets"></div>


<div class="six pockets"></div>

</div>

<div class="chain grid-row">


<div class="twelve pockets"></div>

</div>

<div class="chain grid-row">


<div class="seven pockets"></div>


<div class="five pockets"></div>

</div>

<div class="chain grid-row">


<div class="three pockets"></div>


<div class="nine pockets"></div>

</div>

<div class="chain grid-row">


<div class="eight pockets"></div>


<div class="one pocket"></div>


<div class="three pockets"></div>

</div>
</div>

Registro de cambios

10/11/2018

• Max-width 100% a IMG