6
votos
Aceptado
Problema con CSS Grid
Lo más aconsejable cuando trabajas con el sistema de áreas del Grid es visualizarlo como cuadrículas.
En este caso se quiere que las filas tengan las siguientes cantidades de columnas:
fila1->1
...
5
votos
Aceptado
Columnas con diferentes separaciones verticales
Sucede que la propiedad grid-column-gap no permite más de un valor por grid, es decir no es una propiedad agrupada. Fuente: Documentación Mozilla Documentación Oficial W3C
Sin embargo podrías ...
4
votos
Teoria sobre el sistema de rejillas css
una vez integres la librería puede ser Foundation o Bootstrap no necesitarás utilizar las reglas css grid ni flexbox simplemente le das las clases correspondientes a la documentación de dichas ...
4
votos
Aceptado
Títulos H2, H3 y saltos de línea en Grid
Podrías utilizar grid-column-start y grid-column-end que definen la posición y la extensión de un elemento dentro del contenedor grid. En este caso quiero que los h2 y h3 se extiendan sobre todas 6 ...
4
votos
Aceptado
Problema de centrado vertical con CSS Grid
Considera:
Usa grid para establecer la estructura de tu grilla
Usar mejor flexbox para la alineación de los elementos sobre alguno de sus 2 ejes
Puedes construirlo de esta forma.
Procedimiento
A la ...
3
votos
Aceptado
Hacer una grid de imagenes con css grid
Partiendo que me apoye de este proyecto desarrollado por Sara Drasner para generar la estructura de la grilla buscada quedando de este modo:
<style>
body {
margin: 0;
}
....
3
votos
Aceptado
¿Cómo hacer que un card respete el tamaño de su imagen?
Cuando posicionas un elemento con position: absolute, él va a perder todo el espacio que ocuparía en el documento, no va a conocer quién es su padre cuando dices width: 100% o dónde ubicarse si dices ...
3
votos
Aceptado
CSS Grid, mis imagenes se enciman unas con otras
Hola creo que hay un error en tu seccion de estilos la clase item no esta asignada a ningun elemento, en todo caso lo que estas buscando para ajustar la imagen al espacio es:
.container img {
...
3
votos
Desplegar mesas en un grid
Entiendo que lo que necesitas es crear una tabla donde poner las mesas.
Para la demostración utilizo un array mesasRy. Este array puede ser creado con PHP
1 Utilizando tablas:
// numero de mesas ...
2
votos
Aceptado
Problema ubicación de invalid-feedback en radio buttons
Segun la documentación, esta bien en donde estas poniendo el div invalid-feedback
Lo que se me ocurre que puedes hacer es "reubicarlo" con estilos:
.form-check .invalid-feedback {
margin-left: -...
2
votos
Aceptado
Problema con grid-gap y fr
El problema es que en el primer section el hay 3 huecos de 20px y en el segundo solo 2, utilizando fr siempre quedarán 20px en el aire.
Lo que puedes hacer es forzar en px la segunda columna del ...
2
votos
Cómo puedo hacer este tipo de Card con Bootstrap 4?
La mejor manera de hacerlo no es con las cards de Boostrap. Yo lo haría con el componente media-object
Te permite posicionar de forma fácil una imagen dentro de un wrap. Lee la documentación, es muy ...
2
votos
Aceptado
CSS Grid, no me estaria ordenando las columnas como indico
En principio esta todo correcto lo único es que has dejado un espacio entre repeat y el parentesis debería ser:
grid-template-columns: repeat(3, 250px);
2
votos
Aceptado
Ajustar div rotado dentro de otro div
Para que quede cerrada la pregunta:
Faltaba el width en la clase element. Ya que son elementos cuadrados y tienen un height estático el width debería de ser el mismo.
.element {
border:2px ...
2
votos
como hacer un container con un div en la esquina superior derecha
El position absolute lo ubicara arriba del contenedor y el right lo ubicara a la derecha, ya ahi puedes acomodarlo
<div
style=" display: flex;
width: auto;
margin: 14px;
box-...
2
votos
scroll en css grid
Jugué un buen poco con los valores entre las clases A y C.
Aún no comprendo de donde viene la clase B, por lo que ha sido eliminada.
Lo importante es saber definir height y max-height, ambas usandose ...
2
votos
tamaño diferente de celdas CSS Grid
Si quieres que la celda de abajo suba para ocupar el sobrante de su superior, con grid no sería posible porque al final el grid se comporta como si fuese una tabla. Quizá la mejor opción sería usar ...
2
votos
Aceptado
Cuando pongo una imagen de fondo estatica solo se ve estatica cuando hago scroll desde mi ordenador
Es probable que la propiedad background-attachment: fixed no funcione en ciertos dispositivos móviles. Una posibilidad que tienes está en crear una capa fijada arriba, con el ancho y el alto de la ...
1
voto
Aceptado
como evitar que un Dropdown usando boostrap salga de la pantalla
Si estas utilizando bootstrap 4 solo tienes que agregar en tu dropdown la siguiente clase .dropdown-menu-right
1
voto
como evitar que un Dropdown usando boostrap salga de la pantalla
El problema parece estar en que tienes dos elementos con ml-auto dentro del mismo contenedor.
Intenta lo siguiente:
Mueve los dos ul que tienen ml-auto dentro de un div.
Remueve el ml-auto de los ul....
1
voto
Aceptado
¿Cambiar el valor de la propiedad grid-column/row de css con JavaScript?
Cuando una propiedad contiene un guión, al acceder a ella con JavaScript se utiliza camel case: se quita el guión y la siguiente letra se hace mayúscula. Así, en CSS es z-index pero en JS es zIndex, ...
1
voto
Aceptado
Slider queda sobrepuesto sobre la cabecera al hacer scroll hacia abajo
Podrías utilizar la propiedad z-index a tu navbar, esta propiedad indica el z-order de un elemento y sus descendientes. Cuando varios elementos se superponen, z-order determina cuales cubren a otros.
...
1
voto
Aceptado
Diseño de cuadrícula CSS
Con la ayuda de grid-template-areas podemos resolverlo de manera cómoda y además bastante visual.
Inicialmente veo un error de concepto muy común. Pensaste que necesitabas 9 celdas para conseguir lo ...
1
voto
Aceptado
¿Por qué este css grid no esta alineado y por arriba no hay margen?
Puedes lograrlo con lo siguiente:
Crea tu rejilla con ayuda de CSS Grid distribuyendo las 9 cards con un espacio de 1fr en grupos de 3
A las cajas o cards que estan dentro del contenedor principal, ...
1
voto
Aceptado
after o before no muestra imagen en local
Tu problema es de rutas relativas, y de como estás funcionan.
Por un lado tienes la etiqueta:
<img src="imagenes/ubicacion.png" alt="icono de ubicacion">
Y por otro tienes la regla CSS:
....
1
voto
after o before no muestra imagen en local
Tienes varios errores en los selectores.
El primero es que en el CSS haces referencia a un elemento con clase .contenedor mientras que en el HTML el elemento que más se parece tiene clase ....
1
voto
Problema de centrado vertical con CSS Grid
Prueba a poner un centrado vertical a la etiqueta del contenedor en concreto a través de CSS:
.centrado {vertical-align: middle;display:inline;}
<div class="grid">
<header>Header</...
1
voto
CSS Grid Heigth no se adapta al contenido
Te olvidaste de cerrar el div principal con la clase "gridForm" por eso no puede obtener bien su height
<div class="gridForm">
<p id="titleFormulario">Sumate a nuestra alternativa&...
Only top scored, non community-wiki answers of a minimum length are eligible
Etiquetas relacionadas
css-grid-layout × 78css × 61
html × 31
css3 × 15
html5 × 14
javascript × 7
flexbox × 7
grid × 6
bootstrap × 5
scss × 4
php × 3
selectores-css × 3
reactjs × 2
bootstrap-4 × 2
responsive × 2
mediaqueries × 2
java × 1
c# × 1
jquery × 1
android-studio × 1
visual-studio × 1
asp.net-mvc-5 × 1
canvas × 1
update × 1
menú × 1