Hemos cubierto técnicas antes para cuando desea un elemento de ancho completo dentro de una columna de ancho restringido, como una imagen de borde a borde dentro de una columna de texto más estrecha. Hay muchas técnicas.
Quizás mi favorita es esta pequeña clase de utilidad:
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}Eso funciona siempre que la columna esté centrada y no le importe tener que esconderse overflow-x en la columna (o el cuerpo) ya que de lo contrario esto puede provocar un desbordamiento horizontal.
Últimamente hubo un poco de ida y vuelta sobre otras ideas …
Josh Comeau escribió en su blog que podría configurar una cuadrícula de tres columnas y colocar principalmente el contenido en la columna del medio, pero luego tener la oportunidad de salir de ella:
.wrapper {
display: grid;
grid-template-columns:
1fr
min(65ch, 100%)
1fr;
}
.wrapper > * {
grid-column: 2;
}
.full-bleed {
width: 100%;
grid-column: 1 / -1;
}Creo que esto es inteligente. Probablemente lo usaría. Pero admito que hay partes que me resultan extrañas. Por ejemplo…
- Ahora todo dentro del contenedor es un elemento de cuadrícula. No es un gran problema, pero los elementos se comportarán de manera ligeramente diferente. Sin margen colapsando, por ejemplo.
- Debe aplicar el comportamiento predeterminado que desee a cada elemento. En lugar de que los elementos se apilen uno encima del otro de forma natural, debe seleccionarlos y decirles a dónde deben ir y dejar que se apilen por sí mismos. Se siente un poco menos como ir con la veta de la web. Entonces todavía necesita una clase de utilidad para realizar el comportamiento de sangrado completo.
Lo que realmente me gusta de la idea es que te da esta cuadrícula literal para trabajar. Por ejemplo, su espaciador izquierdo podría tener la mitad del ancho del derecho y eso está totalmente bien. Está configurando ese espacio para ser potencialmente utilizado, como Ethan habló en su artículo sobre cuadrículas restringidas.
Kilian Valkhof respondió al artículo con esta idea:
body > *:not(img):not(video) {
position: relative;
max-width: 40rem;
margin: auto;
}También muy inteligente. Esto restringe el ancho de todo (en cualquier contenedor, y no tendría que ser el cuerpo) excepto los elementos que desea extraer (que también podrían ser una clase de utilidad allí, y no necesariamente imágenes y videos).
Una vez más, para mí, esta sensación de que tengo que seleccionar cada elemento y proporcionarle esta información fundamental sobre el diseño se siente un poco extraña. No es como si fuera raro “no lo uses”, simplemente no es algo a lo que estoy acostumbrado. Históricamente, me siento más cómodo dimensionando y colocando un contenedor y dejando que el contenido de ese contenedor se extienda sin muchas más instrucciones.
¿Sabes lo que más me gusta? Que tenemos tantas herramientas de diseño poderosas en CSS y tenemos conversaciones sobre los pros y los contras de lograr exactamente lo que estamos buscando.
Artículo
el 10 de febrero de 2020
Elementos de ancho completo mediante el uso de cuadrícula de borde a borde
Artículo
el 25 de mayo de 2011
Crear un borde de cuerpo
Artículo
el 7 de agosto de 2018
Creación de carruseles sensibles al tacto con Flickity
Artículo
el 21 de diciembre de 2014
Barras de ancho completo del navegador
Artículo
el 25 de julio de 2016
Contenedores de ancho completo en padres de ancho limitado
Artículo
el 20 de julio de 2020
¿Cuándo usas inline-block?