Preguntas con la etiqueta [css-grid-layout]
El grid layout es un sistema bidimensional de maquetación, que transforma un elemento HTML en una cuadricula. Los elementos hijos de este pueden ser posicionados dentro de las celdas de esta cuadricula, o en áreas definidas arbitrariamente con reglas CSS.
77
preguntas
0
votos
1
respuesta
14
vistas
GRID: Números periódico
Mi duda nace de: Qué pasa con el espacio restante del resultado de crear 3 filas con
"displey: grid" en un contenedor con un height de 100px?
El problema de esto es que se crean 3 números ...
0
votos
0
respuestas
18
vistas
POSICIONAMIENTO TABLA Y JSON
Buena tarde estoy trabajando con un grupo de datos que deben de ordernarse en una tabla, estos datos los obtengo en un objeto json, que estan tal y como la consulta de la base de datos en filas, pero ...
0
votos
1
respuesta
17
vistas
Alinear botones que estan dentro de un elemento LI y div
necesito ayuda con un poco de CSS para botones dentro de un elemento "LI", resulta que tengo un genrador de historial en JS; el cual agrega cada elemento JSON del arreglo HISTORIAL al div ...
0
votos
1
respuesta
64
vistas
Como alinear botones que estan dentro de un elemento LI
necesito ayuda con un poco de CSS para botones dentro de un elemento "LI", resulta que tengo un genrador de historial en JS;
li.appendChild(document.createTextNode(Historial[index].Root+&...
0
votos
0
respuestas
78
vistas
Tarjeta siempre queda del mismo tamaño y no se adapta al tamaño de la imagen en el diseño responsive. html, css
El diseño está planteado con grid y no sé si de pronto el problema sea que los valores de width y heigth están asignados estáticamente, es por esto que al momento de realizar el diseño responsive no ...
0
votos
0
respuestas
12
vistas
FlexBox no parece funcionar con el componente Image de Next.js
Tengo el siguiente componente llamado Guitarra (imagen y su contenido)
import Image from 'next/image';
import Link from 'next/link';
import styles from '../styles/Guitarra.module.css'
const Guitarra =...
0
votos
0
respuestas
27
vistas
Posicionar los elementos sin importar las lineas del GRID CSS
Tengo que hacer un layout como este:
Y tengo por el momento algo asi
Como pueden ver entre el cuadro celeste y gris de la segunda imagen hay un eapacio, que no se como quitar.
Estoy usando css grid.
...
0
votos
1
respuesta
55
vistas
cómo ir a la casilla anterior en css grid usando un bucle foreach?
estoy haciendo una galería de imágenes, que las muestro con un bucle foreach y ordenando las con css grid, el problema es que no puedo usar order, grid-column, grid-row o grid-area para volver atrás ...
2
votos
1
respuesta
52
vistas
tamaño diferente de celdas CSS Grid
Buen día.
He creado una cuadricula con css grid y necesito que el tamaño de las celdas (height) varien segun el contenido de la celda y que la celda que este de bajo suba. las celdas se llenan de ...
0
votos
0
respuestas
26
vistas
Crear estructura con flexbox
El <body> contiene una columna de tres cuadros o filas(<header>, <main>
y <footer>).
<main> contiene una fila de 2 cuadros o columnas(<article> y <aside>), ...
0
votos
1
respuesta
42
vistas
display grid align items center no funciona bien en Chrome
Tengo el siguiente problema.
Estoy utilizando un container con display grid - align items center para alinear el contenido de forma vertical.
El contenido a su vez es un contenedor que a su vez ...
0
votos
0
respuestas
59
vistas
Como hacer que el texto no se vaya achicando mientras voy achicando la pantalla en CSS?
es mi primera intervencion en Stack Overflow. Es para poder realizar una consulta con respecto a un asunto que me tiene trabado. No se como lograr un efecto similar al que posee esta pagina (https://...
0
votos
0
respuestas
120
vistas
Como hago para que no se me desborde el contenedor hijo de el padre
Hola estoy usando una combinación entre grid y flexbox, me he creado una grilla en el home para que adentro de cada grilla crear cards con flexbox, ya emprece creando la primera card pero observen el ...
0
votos
0
respuestas
12
vistas
GRID CSS ::before y ::after no ocupa todo el tamaño de una celda
Bien, estoy usando grid y tengo una celda con una imagen de fondo. Lo que quiero hacer es que al pasarle el mouse por encima, aparesca sobre esta una capa de color rojo con transparencia.
Esto por lo ...
0
votos
1
respuesta
560
vistas
¿Cómo hacer una línea de tarjetas en html?
Tengo 3 tarjetas alineadas de forma horizontal, y quiero agregar otras 3, el problema es que se agregan las 3 justo al lado de las 3 anteriores, quedando 6 en la misma línea, como puedo hacer para ...
1
voto
1
respuesta
44
vistas
¿Cómo prevenir que desaparezcan las líneas de la propiedad gap de un contenedor grid al disminuir el zoom?
Creé un div contenedor con display: grid. Este tiene 16 elementos divididos 4 x 4. Le apliqué un gap de 1px, de forma que hay una separación tanto horizontal como vertical de 1 px. A los divs internos ...
0
votos
2
respuestas
71
vistas
Como hacer que los items de un submenu se comiencen a pintar desde donde comienza el menu hasta donde este termina y no debajo del submenu con CSS
Mi duda es tengo este componente react y lo que deseo es quie los submenus aparezcan en el mismo lugar es decir como tiene los submenu position: absolute cada vez que doy hover en un menu me aparece ...
0
votos
2
respuestas
150
vistas
¿Cómo puedo posicionar (Maquetar) un div con flexbox al final del documento?
Quiero ubicar mi etiqueta footer al finalizar el documento también el sidebar deberia llegar hasta el final del documento,pero no logro hacerlo, me queda un espacio en blanco cuando el contenido de ...
1
voto
0
respuestas
101
vistas
No se me actualizan los cambios en GridLayout java android studio
Tengo una actividad con GridLayout et varios botones .A hacer clic en un botón , se vuelve invisible para siempre.
Hasta aquí todos bien pero el problema surje cuando cierro la actividad y volvo a ...
1
voto
0
respuestas
12
vistas
problema con el espaciado de visual estudio
quisiera que me ayudaran en algo, lo que pasa es que visual studio siempre que guardo reordena el código haciendo imposible hacer grid-template-areas porque pone todos los atributos en una fila de ...
0
votos
1
respuesta
178
vistas
¿Cómo puedo hacer que una foto ocupe todo el div que la contiene? Está dentro de un Grid, pero por algún motivo deja 4px de padding
/* las imágenes han de ser cuadradas y las 9 fotos han de verse en una parrilla de 3*3 */
img {
width: 175px;
height: 175px;
object-fit: cover;
}
/* .container_fotos es a su vez parent ...
1
voto
0
respuestas
88
vistas
CSS Grid, tamaño de un contenedor
En CSS grid habrá una opción en la que en vez de declarar cuántas columnas o filas abarque un contenedor, mas bien esto sea impuesto como de forma dinámica? por ejemplo, en vez de declarar que un div ...
0
votos
1
respuesta
42
vistas
Grid 1x3 donde los primeros dos elementos van a la izquierda y el tercero a la derecha
Tengo un simple grid donde me gustaría los dos primeros elementos se ajusten y peguen a la izquierda, mientras que el último se vaya al final.
Por algún motivo el justify-self no funciona.
También ...
1
voto
2
respuestas
126
vistas
scroll en css grid
No logro un grid que contenga un scroll en uno de sus elementos y que a su vez los elementos se ajusten.
main {
display: flex;
flex-direction:row;
height: 500px;
background: tomato;
}
...
0
votos
2
respuestas
33
vistas
Mi codigo esta muy pegado a su contenedor, debo hacerle un espaciado vertical entre la pared del contenedor y mi lorem
Este es mi codigo de CSS, esta muy pegado al contenedor que cubre todo ese bloque, necesito saber como es posible hacer para que le de mas espacio, especialmente a la primera columna de lorem, ayuda ...
0
votos
0
respuestas
169
vistas
Posicionar div flotante, responsive
Estoy realizando esta vista:
He logrado hacer el resto pero la etiqueta que dice $500 me esta costando. El problema es que tiene que ser responsive, entonces no puedo hacer un div flotante con ...
1
voto
2
respuestas
2k
vistas
como hacer un container con un div en la esquina superior derecha
Estoy intentando hacer esto:
básicamente quiero poner 1 icono en cada círculo para editar y borrar y adentro del container pongo una imagen y texto como se ve en la imagen, sé que puede ser algo ...
2
votos
1
respuesta
157
vistas
centrar vertical y horizontalmente con posición fija un elemento cuando hay 2 columnas css
Quiero crear una plantilla donde pueda tener 2 columnas y en la primera columna pueda fijar vertical y horizontalmente su contenido de acuerdo al tamaño de su sección con posición fija y en la segunda ...
0
votos
1
respuesta
343
vistas
PROBLEMA CON IMAGENES EN CSS GRID
Estoy aprendiendo código y estoy realizando un ejercicio con CSS Grid, he colocado dos imágenes dentro de un grid, pero no se adaptan al ancho de este, y no se qué hacer. He probado con object-fit: ...
0
votos
0
respuestas
67
vistas
Problema con CSS Grid, desaparece con align-items: center; en .container
Tengo un problema, porque cuando agrego align-items: center; en .container, el ancho de mis divs dentro de .container se vuelve 0?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-...
2
votos
1
respuesta
518
vistas
¿Cómo invertir las posiciones de dos bloques dentro de un grid cuando se vea el sitio en dispositivos móviles?
Tengo una sección en la cual uso un grid, el problema es que en computadoras se ve bien, pero en móviles, quiero que aparezca el texto arriba y los inputs abajo (no importa si el botón no aparece ...
0
votos
1
respuesta
39
vistas
como colocar 3 imagenes una encima de otra respetando su posición dentro de grid layout?
Tengo 3 imágenes que deben de ir una encima de otra obligatoriamente para ello uso las propiedades position:absolute y z-index:121,z-index:137,z-index:140, en cada imagen respetivamente, el problema ...
1
voto
2
respuestas
302
vistas
Conservar "value" al insertar nuevo contenido con innerHTML
Estoy tratando de hacer una tabla dinámica, que se le puedan añadir filas, cosa que ya he logrado.
Problema
Al insretar la nueva fila, el valor que habia en las otras filas se borra.
Con este código, ...
0
votos
1
respuesta
32
vistas
¿Por qué este div no se alinea totalmente?
Mi problema es que el div se empieza a imprimir en pantalla a partir del centro de la pagina y lo que yo quiero es que el div alineé su centro con el centro de la pagina, es decir, gráficamente ...
0
votos
1
respuesta
53
vistas
Layout responsivo con css
Buen dia!
Estoy aprendiendo css y quiero hacer el layout de un dashboard que contenga un sidebar, un nav en la parte de arriba y el contenido en el centro.
Lo estoy haciendo utilizando grid, pero no ...
0
votos
1
respuesta
166
vistas
mi imagen no ocupa todas las columnas que le di con CSS Grid
básicamente estoy haciendo una pagina web de películas (Con HTML - SCSS - JS) donde uno puede ver todo tipo de información acerca de cualquier película con la TMBD API. Lo que hago es el usuario busca ...
1
voto
1
respuesta
45
vistas
Como hago para indicar 10 filas para un div con cssgrid
Tengo este html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ...
0
votos
1
respuesta
29
vistas
Espaciados sin solucion HTM CSS_GRID
PADDING DEL HEADER INMENSO
He estado practicando un poco el css grid, pero al realizar este ejemplo, no se de donde ha salido un espacio tan grande en el header y he revisado varias veces en tres ...
1
voto
1
respuesta
97
vistas
barra lateral usando position-fixed con bootstrap
Quiero tener una barra lateral del lado izquerdo fija y que el contenido principal sea donde se haga el scroll, le agregue a mi aside la clase position-fixed pero cuando hago esto, el contenido ...
2
votos
4
respuestas
2k
vistas
¿Como mover item hijo dentro de un contenedor con css grid?
Tengo la siguiente duda, como puedo mover un ítem hijo al principio de su contenedor?? ya coloqué justify-content: end en el contenedor y justify-self: start en el ítem hijo, adjunto código e imagen ...
1
voto
2
respuestas
818
vistas
como evitar que un Dropdown usando boostrap salga de la pantalla
Saludos cordiales comunidad SO, nuevamente solicito su ayuda
tengo este problema.
EL dropdown de boostrap sobresale de la pantalla y no he encontrado la forma de hacer que este no lo haga. he ...
0
votos
0
respuestas
76
vistas
Propiedades CSS no se aplican en grid layout
estoy teniendo un problema con un grid que estoy intentando hacer,
sucede que las propiedades CSS no se aplican al grid, cuando quiero colocarlos en determinada posición.
Tengo un div grid contenedor ...
0
votos
0
respuestas
614
vistas
Css grid layout no me acaba de funcionar correctamente
¡Hola a todos!
Estoy haciendo un ecommerce para un proyecto de clase y me he animado a utilizar el diseño grid de css para que sea algo más responsive, la cosa es que cuando lo pongo en móvil con la ...
2
votos
0
respuestas
160
vistas
¿Como puedo lograr que css grid con imagenes sea responsive?
Mi contenedor no se ajusta al tamaño de la pantalla, como puedo hacer para que si lo haga?
Mi codigo:
*{
box-sizing: border-box;
}
h4{
text-align: center;
margin: 15px 0;
}...
2
votos
1
respuesta
648
vistas
¿Cambiar el valor de la propiedad grid-column/row de css con JavaScript?
¿Qué tal?
Estoy tratando de cambiar los valores de las propiedades de css
grid-column
grid-row
con un mouseover desde JavaScript pero no se como llegar a ellas, lo que siempre hago es
element....
0
votos
0
respuestas
21
vistas
necesito guardar el equipoEmpleado en el viewData
Necesito guardar en las vistas del edit equipo empleado en el viewdata.
<div class="card-body">
@using (Html.BeginForm("", "", FormMethod.Post, new { @class = "contact_form", @id = "...
0
votos
1
respuesta
439
vistas
Slider queda sobrepuesto sobre la cabecera al hacer scroll hacia abajo
He introducido un slider sacado de la página w3schools el problema es que cuando hago scroll hacia abajo el slider queda sobrepuesto sobre la cabecera como muestro en la foto, hay alguna forma de que ...
5
votos
1
respuesta
1k
vistas
¿Cómo hacer que un card respete el tamaño de su imagen?
Básicamente estoy haciendo como mi primer portafolio donde tiene varias secciones y entre ellas está la de proyectos. En esta parte tengo dos imágenes, que representan dos proyectos con una breve ...
1
voto
1
respuesta
129
vistas
Diseño de cuadrícula CSS
Estaba mirando la página de W3Schools y me surgió una duda.
Tengo planeado hacer una página que tenga el siguiente formato:
Pero mirando la información que da la página, no me queda muy claro como ...
1
voto
1
respuesta
4k
vistas
Hacer una grid de imagenes con css grid
Estoy haciendo una página web de viajes, estoy necesitando hacer una grid con imagenes como muestro en la imagen, las 3 imagenes del lado derecho tienen las mismas dimensiones, y las dos del lado ...