Resultados de la búsqueda a petición "css-grid"

2 la respuesta

¿Cómo especificar el número máximo de columnas que se repetirá () creará usando autoajuste / relleno?

Hay alguna manera, sin usar la consulta de medios, para limitar el número de columnas que se crean y combinarlo con autoajuste / relleno? Por ejemplo grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); Crea un diseño maravilloso y ...

2 la respuesta

Grid con altura de ventana y desplazamiento interno div

Estoy tratando de crear un diseño que use una cuadrícula que ocupe toda la ventana gráfica del navegador height: 100vh) y luego permite que un div dentro de uno de los elementos de la cuadrícula se desplace en la dimensión Y. Aquí hay un ...

3 la respuesta

¿Cómo aplanar divs anidados para mostrarlos en una cuadrícula CSS?

Genero una tabla (con vue.js) a partir de un objeto que se supone que tiene dos columnas de ancho. Cada una de las columnas proviene de la clave y el valor del objeto. Esto es equivalente al siguiente HTML real: <div id="table"> <div> <div> ...

1 la respuesta

¿Cómo calcular () el número de filas en una plantilla de cuadrícula?

Me gustaría calcular el número de filas en una plantilla de cuadrícula usandocalc(), pero tratando de obtener elrepeat contar con división no funciona: .grid { display: grid; grid-gap: 10px; grid-template-columns: 1fr; margin-bottom: 10px; ...

3 la respuesta

¿Cómo hacer que los elementos de la última fila consuman el espacio restante en CSS Grid?

¿Hay alguna forma de forzar a todos los elementos de la última fila, de una cuadrícula, a llenar la fila, sin importar cuántos sean? No sé la cantidad de elementos que estarán en la cuadrícula, por lo que no puedo apuntarlos directamente. ...

1 la respuesta

¿Cómo puedo forzar esta cuadrícula CSS para que se ajuste a una nueva línea sin especificar tamaños minmax?

Vengo de un fondo pesado de div / float para construir sitios receptivos (por ejemplo, Bootstrap 3, Foundation) y utilicé Flex box brevemente, pero he estado intentando usar Grid en todas partes ya que ha sido realmente genial para resolver una ...

1 la respuesta

¿Cómo repetir un patrón de diseño de cuadrícula CSS?

Estoy tratando de hacer un diseño de cuadrícula con la repetición de 2 secciones verticales y 2 horizontales. Luego 2 horizontales, 2 verticales, y repetimos nuevamente. Me gusta esto .container { max-width:940px; margin: 0 auto; } ...

1 la respuesta

¿Cómo es que minmax (0, 1fr) funciona para elementos largos mientras que 1fr no lo hace?

Así que tengo esta cuadrícula: +---------+------------------------------+---------+ | <div> | <p> - 1000 characters long | <div> | +---------+------------------------------+---------+ Dentrop hay una cadena súper larga sin espacios. @divs son ...

1 la respuesta

¿Por qué el contenido mínimo no funciona con autocompletar o autoajustar?

Básicamente, no entiendo por qué esto funciona: .grid { display: grid; grid-template-columns: repeat(4, min-content); } Pero esto no funciona: .grid { display: grid; grid-template-columns: repeat(auto-fill, min-content); } Realmente deseo ...

4 la respuesta

¿Por qué la altura de mi elemento de cuadrícula no se calcula correctamente?

Tengo problemas con la altura de un elemento de cuadrícula CSS. El código que estoy usando es: .gridContainer { border: thin solid black; background: rgba(255, 0, 0, 0.5); display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; ...