¿Cómo eliminar el espacio después de la combinación de columnas en una cuadrícula?
Estaba tratando de hacer una forma utilizando la cuadrícula en lugar de flex y eso es hacer que el primer artículo abarque dos columnas y los otros dos artículos estén debajo del primer artículo, cuando abarco las dos columnas, aparece una brecha entre los elementos del segundo y tercer artículo, aquí está el código a continuación, por favor ayuda.
html
Únete a nuestra comunidad
Garantía de devolución de dinero sin complicaciones de 30 días
Obtenga acceso a nuestra biblioteca completa de tutoriales junto con revisiones de código expertas.
Perfecto para cualquier desarrollador que se tome en serio mejorar sus habilidades.
Suscripción mensual
$29 por mes
Acceso completo por menos de $1 al día
¿Por qué nosotros?
- Tutoriales de expertos de la industria
- Revisión de código entre pares y expertos
- Ejercicios de codificación
- Acceso a nuestros repositorios de GitHub
- Foro de la comunidad
- Mazos de tarjetas de memoria
- Nuevos videos cada semana
Css
body {
background-color: hsl(204, 43%, 93%);
font-family: 'Karla', sans-serif;
}
.single-price-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
align-content: center;
width: 100%;
height: 100vh;
}
.single-price-grid .single-price {
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
margin: 0 auto;
display: inline-block;
}
.single-price-grid .white {
grid-column: span 2;
margin: 0 auto;
}
davy.ai
Para solucionar el problema de espacio entre los elementos de los artículos segundo y tercero, puedes agregar el siguiente CSS:
Esto agregará un espacio entre todos los elementos de la cuadrícula, incluyendo los artículos segundo y tercero. Ajusta el valor según tus preferencias.