Mover elementos en el diseño de cuadrícula de CSS [Guía]
Utilizando la Módulo de diseño de cuadrícula CSS El diseño web se vuelve cada vez más factible a medida que más navegadores comienzan a apoyalo. Sin embargo, al crear diseños que rellenan celdas de la cuadrícula, puede llegar un momento en el que desee lograr cosas más complicadas..
Por ejemplo, es posible que desee mover ligeramente alrededor algunos de los elementos de la cuadrícula se atascan en sus áreas de cuadrícula. También es posible que desee sacarlos del contenedor de la red (desbordamiento), o uno sobre el otro (superposición), o simplemente ... a algún espacio vacío alrededor.
Así que, en este post, te mostraré cómo puedes Mover, ordenar, desbordar, superponer y dimensionar elementos de la cuadrícula cuando usas el módulo de diseño de cuadrícula CSS.
Crear una cuadrícula CSS
Primero, vamos a crear una cuadrícula CSS simple con una fila y tres columnas.
En el HTML, creamos un grupo de divs donde el contenedor de cuadrícula contiene los tres elementos de la cuadrícula.
En el CSS, el contenedor de cuadrícula. tiene el pantalla: rejilla; propiedad y los elementos de la rejilla tener área de cuadrícula que identifica los nombres de las áreas de elementos de la cuadrícula.
Nosotros también añade el cuadrícula-plantillas-áreas propiedad al contenedor de cuadrícula, en el que los nombres de área de cuadrícula se utilizan para Asigna las áreas de la cuadrícula a las celdas de la cuadrícula que representan..
Todas las columnas tomar el tamaño de una fracción (fr) del ancho del contenedor, asegurando la contención de los elementos de la rejilla..
.grid-container display: grid; cuadrícula-plantillas-áreas: 'izquierda centro derecha'; cuadrícula-plantilla-columnas: repetir (3, 1fr); rejilla-plantilla-filas: 80px; rejilla: 5px; ancho: 360px; color de fondo: magenta; .grid-left grid-area: left; .grid-center grid-area: center; .grid-right grid-area: right; .grid-container div background-color: lightgreen;
Elementos de la rejilla de desbordamiento
Puedes hacer un elemento de rejilla. desbordar su contenedor de rejilla Si es necesario para un diseño. Para lograr el efecto de desbordamiento, solo necesitas usa un tamaño de columna diferente:
.grid-container display: grid; cuadrícula-plantillas-áreas: 'izquierda centro derecha'; cuadrícula-plantilla-columnas: repetir (3, 150px); rejilla: 5px;
los suma de la columna y tamaño de la brecha es más grande que el ancho del contenedor, lo que hace que los elementos de la rejilla desborden su contenedor.
Superponer elementos de la cuadrícula
UNA elemento de la cuadrícula puede superponerse (total o parcialmente cubierta) otro elemento de cuadrícula en los siguientes casos:
- Está configurado para abarcar (y sobre) las celdas de otro elemento de la cuadrícula.
- Se ha aumentado su tamaño, lo que hace que se superponga con el elemento de cuadrícula cercano.
- Se ha movido sobre otro elemento de la cuadrícula..
Discutiremos el segundo y tercer caso más adelante, en el “Dimensionamiento” y “Emocionante” secciones.
Primero, veamos el primer caso cuando un elemento de la cuadrícula se extiende a través de otro.
El elemento de cuadrícula en el centro tiene extendido sobre la izquierda, por lo que solo dos elementos son visibles en la pantalla.
.centro de cuadrícula área de cuadrícula: centro; cuadrícula-columna: 1/3;
los columna de cuadrícula y fila de rejilla propiedades asignar líneas de cuadrícula entre los cuales una columna o fila debe encajar.
En el diagrama de abajo, puedes ver cómo cuadrícula-columna: 1/3 La regla CSS funciona: la columna central se extiende entre las líneas de cuadrícula 1 y 3. Como resultado, la columna central se superpone a la izquierda.
Mover elementos de la cuadrícula
Al moverme, quiero decir moviendo los artículos ligeramente alrededor. Si desea reubicar completamente un elemento en otra celda / área de cuadrícula, le recomiendo que actualice el código de creación de cuadrícula.
Moverse por los elementos de la red es simple. Sólo utilizar el margen, la transformar, o la posición: relativa; propiedades. Vea a continuación cómo se mueven los elementos utilizando esas propiedades.
Los elementos de la cuadrícula central y derecha se pueden mover (como se muestra arriba) de las siguientes maneras:
1. Usando margen
Los márgenes negativos aumentan las dimensiones de los elementos de la cuadrícula, mientras que los márgenes positivos los recortan. Al usar una combinación de ambos, puedes mover los elementos de la cuadrícula ligeramente.
.centro de cuadrícula área de cuadrícula: centro; margen izquierdo: -10px; margen derecho: 10px; margen superior: -10px; margen inferior: 10px; .grid-right grid-area: right; margen izquierdo: 10px; margen derecho: -10px; margen superior: -10px; margen inferior: 10px;
2. Usando transformar
los traducir() Función CSS mueve un elemento a lo largo de los ejes x e y. Usándolo junto con el transformar La propiedad le permite cambiar la posición de un elemento de cuadrícula.
.centro de cuadrícula área de cuadrícula: centro; transformar: traducir (-10px, -10px); .grid-right grid-area: right; transformar: traducir (10px, -10px);
3. Usando posición
Utilizando la posición: relativa; gobernar con lo especificado parte superior, fondo, izquierda, y Correcto Las propiedades se pueden utilizar para mover elementos de la rejilla también..
.centro de cuadrícula área de cuadrícula: centro; posición: relativa; abajo: 10px; derecha: 10px; .grid-right grid-area: right; posición: relativa; abajo: 10px; izquierda: 10px;
Ordenar artículos de la rejilla
Los elementos de la cuadrícula se representan en la pantalla. En el orden en que aparecen en el código fuente HTML..
En la sección anterior, cuando el elemento central se movió a la izquierda, el navegador lo colocó en la parte superior del elemento izquierdo. Esto sucedió porque en el HTML, Sin embargo, podemos cambiar los elementos de la cuadrícula de orden utilizando la Utilizando la Al igual que en el módulo de diseño de cuadrícula CSS, cambiar el orden de los elementos en HTML no afecta el diseño de la cuadrícula, también puedes poner Si utiliza filas o columnas de tamaño automático para un elemento de la cuadrícula (con Recuerde, en nuestra cuadrícula de muestra, las tres columnas toman una fracción ( Aquí, cambiamos el tamaño del artículo de la izquierda. utilizando la Aquí, cambiamos el tamaño del artículo de la izquierda. utilizando la índice z o la orden Propiedades CSS.
índice z: 1; regla, el elemento de la rejilla izquierda tiene un mayor contexto de apilamiento.. cuadrícula izquierda área de cuadrícula: izquierda; índice z: 1;
Tamaño de los elementos de la rejilla
auto, fr, gramo unidades), se reducirá para hacer espacio para su elemento vecino que ha crecido en tamaño sólo si dicho artículo no fue dimensionado por transformar o un margen negativo.fr) del contenedor de rejilla. Eche un vistazo a cómo se ven los tres elementos después de que el izquierdo se redimensiona de dos maneras diferentes.1. Tamaño de
anchura y alturaanchura y altura propiedades. Como resultado, permanece dentro del contenedor de rejilla..
.cuadrícula izquierda área de cuadrícula: izquierda; ancho: 200px; altura: 90px;
2. Tamaño de
transformartransformar propiedad. Como resultado, desborda el contenedor y la brecha de la cuadrícula también desaparece..
.cuadrícula izquierda área de cuadrícula: izquierda; transformar: escalex (1.8);
