Construyendo mi propio GRID - Full CSS

Al desarrollar herramientas de desarrollo web no solo es una labor de saber programar, al cliente le entra todo por los ojos es bueno tenerlo en cuenta

En muchos casos es buena practica recurrir al uso de frameworks especificamente en el lado frontend (cuando el tiempo es limitado) pero en muchos otros el proyecto amerita el desarrollo nativo de las interfaces siendo uno de los principales cuellos de botella el desarrollo del grid(malla) de las interfaces.Existen algunas soluciones en librerias CSS para dar solucion a este punto especificamente.

En este post te mostraremos el desarrollo de un grid para que puedas tu usarlo y/o aprender como se realiza un grid basico.


codigo HTML
----------------

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Grid Web Column</title>
  <link href="style.css" rel="stylesheet"/>
</head>
<body>

<div class="container">

  <div class="row">
    <div class="col-12"><div class="panel"> Col 12</div></div>
  </div>
  <div class="row">
    <div class="col-6"><div class="panel"> Col 6</div></div>
    <div class="col-6"><div class="panel"> Col 6</div></div>
  </div>
  <div class="row">
    <div class="col-4"><div class="panel"> Col 4</div></div>
    <div class="col-4"><div class="panel"> Col 4</div></div>
    <div class="col-4"><div class="panel"> Col 4</div></div>
  </div>
  <div class="row">
    <div class="col-3"><div class="panel"> Col 3</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
  </div>
  <div class="row">
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
  </div>
  <div class="row">
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
  </div>
  <div class="row">
    <div class="col-11"><div class="panel"> Col 11</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
  </div>
  <div class="row">
    <div class="col-10"><div class="panel"> Col 10</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
  </div>
  <div class="row">
    <div class="col-9"><div class="panel"> Col 9</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
  </div>
  <div class="row">
    <div class="col-8"><div class="panel"> Col 8</div></div>
    <div class="col-4"><div class="panel"> Col 4</div></div>
  </div>
  <div class="row">
    <div class="col-7"><div class="panel"> Col 7</div></div>
    <div class="col-5"><div class="panel"> Col 5</div></div>
  </div>
  <div class="row">
    <div class="col-6"><div class="panel"> Col 6</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
  </div>

</div>

</body>
</html>


Codigo CSS
----------------

  *{
    box-sizing:border-box;
  }
  body{
    font-family:helvetica,sans-serif,arial;
  }
  .container{
    /*width: 800px;*/
    width: 95%;
    margin: auto;
  }
  .container-fluid{
    padding: 20px;
    margin:0;
  }
  .row:after{
    content: " ";
    display: block;
    clear: both;
  }
  [class*="col-"]{
    float: left;
    padding-right: 15px;
  }
  [class*="col-"]:last-of-type{
    padding-right: 0;
  }
  .col-1{width: 8.33%}
  .col-2{width: 16.66%}
  .col-3{width: 25%}
  .col-4{width: 33.33%}
  .col-5{width: 41.66%}
  .col-6{width: 50%}
  .col-7{width: 58.33%}
  .col-8{width: 66.66%}
  .col-9{width: 75%}
  .col-10{width: 83.33%}
  .col-11{width: 91.66%}
  .col-12{width: 100%}
  .panel{
    padding: 10px;
    margin-top:10px;
    background-color: #ddd;
    border:1px solid #ccc;
  }
  @media screen and (max-width: 485px){
    .container, .container-fluid{
      width: 100%;
    }
    [class*="col-"]{
      width: 100%;
      padding-right: 0;
      float: none;
    }
  }
  @media screen and (max-width: 800px){
    .container, .container-fluid{
      width: 100%;
    }
  }

Captura del resultado (Click para ampliar)
------------------------


👉👉Repositorio: GGithub repositorio👈👈

Si te ayudo, sirvió o gusto compártelo y recuérdate agradecer 😊

Comentarios

Publicar un comentario

Entradas populares de este blog

Desarrollo de sistemas web en PHP 7 POO, MySQL, Jquery & Ajax [Mega](Udemy)

Imagen
Un curso excelente si deseas desarrollar tus propios sistemas web de gestión de información desde cero. Aprende a desarrollar sistemas de gestión de información utilizando el lenguaje de programación PHP y la programación orientada a Objetos, el gestor de base de datos MariaDB (MySql), para el diseño y la administración de la base de datos trabajaremos con las herramientas MysqlWorkbench y PhpMyadmin, utilizaremos HTML5 y CSS3 para el diseño de las páginas web que conformarán nuestro proyecto, pero para hacer más fácil nuestro diseño web trabajaremos con el framework Bootstrap, revisaremos la librería JQuery y la tecnología Ajax para hacer dinámico nuestro proyecto web. Desarrollaremos como ejemplo un SISTEMA INFORMÁTICO desde cero para que te sirva como guía. Diseñaremos la base de datos de nuestro proyecto utilizando MysqlWorkBench. Trabajaremos con plantillas web. Implementaremos la conexión y las funcionalidades necesarias para conectar la base de datos MariaDB(Mysql) con nu
Leer más

Ubigeo MySql - Base de datos Distrito - Departamento - Provincia Perú

Imagen
Base datos Mysql Ubigeo - Perú para fines didácticos. Pero a todo esto...  ¿Qué es ubigeo ? 😅😵 Pues bien, Ubigeo  es el nombre que se le da oficialmente al código de ubicación geográfica en el Perú, y que es empleado para codificar las divisiones territoriales del país. Como tal, la palabra  ubigeo  es un acrónimo que se forma a partir de las palabras “ubicación” y “geográfica”. 🙀🙀🙀 Cogido fuente y repositorio en la Parte final del post. Script database.sql Si te ayudo, sirvió o gusto compártelo y recuérdate agradecer  😊 👉👉 Descargar base de datos ubigeo.sql  👈👈 👉👉 Ir a repositorio en GitHub   👈👈 Junior Yauricasa
Leer más

Saga X-Men [MOVIES]

Imagen
Saga X-Men X-Men 1 (2000) DESCARGAR X-Men 2 (2003) DESCARGAR X-Men 3 (2006) DESCARGAR X-Men Origins: Wolverine (2009)  DESCARGAR X-Men: First Class (2011) DESCARGAR The Wolverine (2013)  DESCARGAR X-Men: Apocalipsis (2016)  DESCARGAR X-Men: Dia del pasado DESCARGAR
Leer más