Como crear tu sistema de grid para substituir a bootstrap, aplicado a React

9623

Viendo el potencial que tiene grid css, he creado mi propio sistema para montar las tipicas row y col de bootstrap, totalmente personalizado y con mucho menos codigo que bootstrap.
La idea es, creamos un componente de react:

import React from 'react';
import PropTypes from "prop-types";
import './Grid.css'

const Grid = (props) => {
    return (
        <div className={['Grid', props.className].join(' ')}>
            {props.children}
        </div>
    );
};
Grid.propTypes = {
    className: PropTypes.string
};
export default Grid;```

Basicamente si no usas react da =, la esencia es simplemente un div con una clase.
Luego el css seria de este modo:
.Grid {
  display: grid;
  grid-gap: 15px;
}
@media (min-width: 576px) {
  .Grid {
    grid-auto-flow: column;
  }
}
Basicamente eso hace que por defecto, al usar algo como

<Grid>
<div>Contenido</div>
<div>Contenido</div>
<div>Contenido</div>
</Grid>

te lo separa en columnas iguales, en mobile te lo pasara a rows. Esa es la estructura base que almenos se suele cumplir en mis paginas para un grid. Ademas con grid-gap le ponemos la distancia entre columnas y rows.

Como extendemos esa funcionalidad a grids mas complejos?
En el fichero Grid.css incorporamos todas las versiones de grids distintas que vayamos necessitando, podriamos copiar a bootstrap y crear un sistema de 12 columnas si queremos, pero eso serian 12*5 breakpoints de clases, seria muchisssimo codigo y no tendriamos la misma flexibilidad, asi queen mi caso, he optado en hacerlo custom. Mi fichero Grid.css se ve del siguiente modo:

.Grid {
display: grid;
grid-gap: 15px;
}
@media (min-width: 576px) {
.Grid {
grid-auto-flow: column;
}
}
.grid-col {
grid-auto-flow: column;
}
.grid-col-1-1-1{
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
}

.grid-row {
grid-auto-flow: row;
}
.grid-row-80px {
grid-auto-flow: row;
grid-auto-rows: 80px;
}

.grid-gap-10 {
grid-gap: 10px;
}
.grid-row-gap-0 {
grid-row-gap: 0;
}

.grid-col-3 {
grid-column: 1 / 4;
}

@media (min-width: 576px) {
.grid-col-1-1-1–sm {
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
}
.grid-col-6-5-6–sm {
grid-template-columns: 6fr 5fr 6fr;
}
.grid-col-gap-40–sm {
grid-column-gap: 40px;
}
}
@media (max-width: 576px) {
.grid-col-3–xs {
grid-column: 1 / 4;
}
}


Como podemos ver, tenemos varios tipos de clases, la sintaxis `.grid-col-1-1-1` para definir un sistema de 3 columnas iguales, igual modo como grid-col-1-2-1 diriamos que serian de 25% 50% 25% y asi podriamos ir creando, siempre definiendo con la unidad de mesura fr.

Luego si una columna ocupa mas de 1fr, podemos cambiarle el tamaño con la sintaxis .grid-col-3 , que seria un tamaño de 3 columnas.
Si queremos cambiar la distribucion de columnas de modo responsive, incluimos al final la sintaxis  --xs / --sm / --md / --lg / al final.

Y para cambiar el espacio entre columnas y rows, pues creamos clases con la sintaxis grid-gap-20 = 20px.

Para incoporar estas clases, no hay mas que usar className en Grid obviamente, por ejemplo:

<Grid className="grid-col">

  <Grid className="grid-row-80px grid-gap-10">
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
    <div>Contenido</div>
  </Grid>

  <Grid className="grid-row-80px grid-gap-10">
    <div>Contenido</div>
    <div>Contenido</div>
  </Grid>

  <Grid className="grid-row-80px grid-gap-10">
    <div>Contenido</div>
  </Grid>

</Grid>```

De este modo, logramos un sistema de columnas totalmente custom, reutilizando todo el codigo. Asi que bueno, os animo a probarlo y si veis que se puede mejorar de algun modo o teneis alguna duda ponedlo en los comentarios.

hace 7 años