Lección 2: Container

Un contenedor es un elemento que contiene otros elementos para limitar el ancho del contenido. Basicamente tendremos un elemento que envolverá a todo el contenido de la página o una sección en particular.

Sus ventajas están relacionadas con adaptar un diseño a diferentes resoluciones. Podemos lograr sin mucho esfuerzo:

Centradar el contenido. Se puede hacer con margin-inline: auto (o margin-left y margin-right con auto).
Dar una anchura máxima al diseño (se recomienda 1000px).
Dar un padding (espacio) alrededor del contenido para que no quede pegado a los bordes en pantallas pequeñas.

Redimensiona el siguiente ejemplo para ver cómo se adapta a los diferentes tamaños de pantalla. Ocupará el 100% del ancho de la pantalla en pantallas pequeñas y se bloqueará en un tamaño fijo centrado en pantallas grandes.

Soy un contenedor de 600px como máximo, el lugar donde irá toda la web.

Para crear un contenedor, se suele utilizar el nombre de clase .container, y se le añaden los siguientes estilos.

.container {
    margin-inline: auto;
    max-width: 1000px;
    padding: 1rem;
}

El elemento que utiliza la clase, siempre debe envolver a todo el contenido de la página o sección.

<main>
    <div class="container">
	<!-- Aquí va todo el contenido de la página -->
    </div>
</main>

Con el HTML anterior estamos centrando toda la página, lo cual no es buena idea cuando quieres usar un color de fondo que abarque todo el ancho de la pantalla. Lo ideal es crear un contenedor por cada sección de la página.

.container {
	margin-inline: auto;
	max-width: 1000px;
	padding: 1rem;
}

.hero {
	background: #A9B4C2;
}

.info {
	background: #488286;
}

<main>
    <section class="hero">
        <div class="container">
	    <!-- Aquí va todo el contenido de la sección -->
	</div>
    </section>
    <section class="info">
        <div class="container">
	    <!-- Aquí va todo el contenido de la sección -->
	</div>
    </section>
</main>

Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat? Consectetur lorem donec massa sapien, faucibus et molestie ac, feugiat sed?

Morbi tristique senectus et netus et malesuada fames ac turpis? Pellentesque nec nam aliquam sem et tortor consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id!

Como puedes observar, el color de las secciones abarcan todo el ancho mientras que el contenido está centrado. ¡Lo hemos logrado!

Tendremos el buen hábito de crearemos contenedores para nuestras secciones y nunca para toda la página. Y en caso de necesitar que un contenido ocupe toda la pantalla, simplemente no lo envolvemos en un contenedor.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario