CSS puro aplicando relleno y bordes a unidades de cuadrícula

Pure CSS es un marco CSS gratuito y de código abierto. Es un conjunto de instrumentos para desarrollar sitios web receptivos y aplicaciones en línea. Esto fue creado por Yahoo y se utiliza para crear sitios web que son más rápidos, estéticamente más hermosos y más fáciles de usar. Reemplaza efectivamente a Bootstrap . El diseño receptivo se consideró al crear Pure CSS. Como consecuencia, obtenemos diseños receptivos consistentes y prediseñados para todas las plataformas.

Las cuadrículas CSS puras se utilizan para crear diseños y hacer diseños receptivos agregando la clase pure-g a un contenedor. No hay clases específicas para agregar que agreguen relleno o bordes a las unidades de cuadrícula, pero podemos usar CSS tradicional para que eso suceda. Hay dos formas de implementar esto, que se indican a continuación.

Clases básicas de Pure CSS Grid utilizadas:

  • pure-g: esta clase se utiliza para crear un sistema de cuadrícula Pure CSS.
  • pure-umn: Esta clase se utiliza para sumar las unidades del sistema grid.

Sintaxis:

<div class="pure-g">...</div>

Ejemplo 1: este ejemplo describe una forma de agregar relleno y borde que consiste en anidar un elemento <div> dentro de una unidad de cuadrícula y debe agregar estilo a ese contenedor secundario.

HTML

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/pure-min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css">
    <link rel="stylesheet" href=
"https://purecss.io/layouts/side-menu/styles.css">
  
    <script src=
"https://purecss.io/js/ui.js">
    </script>
    <style>
        .l-box {
            padding: 8rem;
            border: 1rem solid darkcyan;
            background-color: beige;
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="header">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h2>
                Pure CSS applying Padding and 
                Borders to Grid Units
            </h2>
        </div>
  
        <div class="pure-g">
            <div class="pure-u-1-2">
                <div class="l-box">
                    1st Column
                </div>
            </div>
            <div class="pure-u-1-2">
                <div class="l-box"> 
                    2nd Column  
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

 

Ejemplo 2: Este ejemplo describe otro enfoque para agregar relleno y borde a las unidades de la cuadrícula, es aplicar estilo a esas unidades de la cuadrícula de inmediato. Este enfoque podría distorsionar el diseño, solo necesitamos agregar la propiedad border-sizing: border-box a las unidades de cuadrícula.

HTML

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/pure-min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css">
    <link rel="stylesheet" href=
"https://purecss.io/layouts/side-menu/styles.css">
      
    <script src=
"https://purecss.io/js/ui.js">
    </script>
    <style>
        .pure-g > div {
            box-sizing: border-box;
            padding: 8rem;
            border: 1rem solid darkgrey;
            background-color: lightcyan;
            font-size: 1rem;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="header">
            <h1 style="color:green;">GeeksforGeeks</h1>
            <h2>
                Pure CSS applying Padding 
                and Borders to Grid Units
             </h2>
        </div>
  
        <div class="pure-g">
            <div class="pure-u-1-4">
                    1st Column
            </div>
            <div class="pure-u-1-4">
                    2nd Column  
            </div>
            <div class="pure-u-1-4 o-box">
                    3rd Column  
            </div>
            <div class="pure-u-1-4">
                    4th Column  
            </div>
        </div>
    </div>
</body>
</html>

Producción:

 

Referencia: https://purecss.io/grids/#applying-padding-and-borders-to-grid-units 

Publicación traducida automáticamente

Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *