Introducció
A Document - Box, vam veure maneres en què pots utilitzar Tailwind per controlar la visualització d’un únic element DOM. En aquest activitat, veurem com Tailwind pot gestionar el disseny de múltiples elements.
Amb Tailwind, pots dissenyar els elements d’una pàgina sencera i gestionar característiques comunes com la navegació, barres laterals i peus de pàgina. També pots utilitzar Tailwind per crear agrupacions complexes d’elements dins d’una pàgina.
Entorn de treball
Crea un projecte nou tal com vas fer a Document - Estil
Containers
La utilitat .container especifica el max-width de l’element basat en l’amplada de la finestra de visualització del navegador. Per exemple, qualsevol finestra de visualització entre 640 i 768 píxels d’amplada s’establiria amb un max-width de 640 píxels. Un cop la finestra de visualització supera els 768, el max-width es manté a 768 píxels fins que la finestra de visualització arriba als 1024 píxels i després salta de nou quan la finestra de visualització arriba als 1280 píxels.
L’avantatge d’utilitzar un contenidor és que et permet només preocupar-te d’aquestes amplades específiques en el teu disseny en lloc d’haver de tenir en compte qualsevol amplada possible que pugui tenir la finestra de visualització.
En CSS, la finestra de visualització és l’àrea del navegador on l’usuari pot veure contingut. Normalment, la dimensió de preocupació és l’amplada de la finestra de visualització, perquè això determina quant contingut es pot col·locar a través de la pantalla sense desplaçar-se horitzontalment. L’etiqueta HTML meta s’utilitza per controlar l’amplada de la finestra de visualització en pantalles mòbils.
Per defecte, els navegadors mòbils sovint assumeixen una pantalla més ampla que el dispositiu real (sovint 980 píxels) i escalen el contingut per ajustar-se a la pantalla. Això normalment es veu terrible.
Utilitzar l’atribut content="width=device-width,initial-scale=1" perquè el navegador utilitzi la mida del dispositiu com a finestra de visualització en lloc de reduir la pantalla des d’una mida més àmplia.
<head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="./main.css" rel="stylesheet"/></head>Un .container de Tailwind no centra automàticament els seus elements fills horitzontalment. Per obtenir el comportament de centrat, has d’aparellar el contenidor amb mx-auto.
Un .container de Tailwind tampoc introdueix un farciment o marge per separar els seus elements de la vora del navegador. Per obtenir aquest comportament, has d’aparellar el contenidor amb una utilitat .m- o .p-.
Així doncs, una llista de classes plausible per al teu element de nivell superior podria ser class="container mx-auto py-12 px-6".
<body> <div class="container mx-auto py-12 px-6"> <div class="prose"> </div> </div></body>Grid
El disseny de graella (grid layout) et permet col·locar fàcilment elements en una graella de 12 columnes.
Necessites la utilitat grid com a part de la llista de classes al nivell superior de la teva graella, per sobre dels elements individuals de la graella.
L’ús més comú d’una graella és separar la pàgina en una sèrie de columnes, cosa que pots fer amb grid-cols-{count}. Aquests van des de grid-cols-1 fins a grid-cols-12, cadascun dels quals separa la pàgina en aquest nombre de columnes.
No necessites especificar explícitament una fila. Dins d’una graella, CSS omplirà automàticament cap a la següent fila segons el nombre de columnes que declaris.
Per exemple, pots utilitzar alguna cosa com això:
<div class="grid grid-cols-2 w-1/4 gap-4"> <div class="border bg-blue-300 text-center">A</div> <div class="border bg-blue-300 text-center">B</div> <div class="border bg-orange-300 text-center">C</div> <div class="border bg-orange-300 text-center">D</div></div>Acabes amb una graella 2x2 amb A i B a la fila superior i C i D a la fila inferior:
Pots especificar el nombre de files amb grid-rows-{count}, que pot tenir un sufix de 1 a 12, i grid-flow-col per omplir la graella verticalment columna per columna.
<div class="grid grid-rows-2 grid-flow-col w-1/4 gap-4"> <div class="border bg-blue-300 text-center">A</div> <div class="border bg-blue-300 text-center">B</div> <div class="border bg-orange-300 text-center">C</div> <div class="border bg-orange-300 text-center">D</div></div>Com pots veure en els exemples anteriors, pots afegir un espai entre les cel·les de la taula amb gap-{size}, que pren un sufix que és la mida de l’espai, utilitzant els mateixos “alguns números del 0 al 96” que vas veure per al “padding” i “margin”.
Si vols que l’espai només sigui horitzontal, pots utilitzar gap-x-{size}. I si vols que l’espai només sigui vertical, utilitza gap-y-{size}.
span
Com amb les taules, de vegades vols que una cel·la cobreixi més d’una fila o columna.
Tens dues maneres de gestionar això: span i start/end.
Utilitzant span, especifiques el nombre de columnes o files que vols que ocupi la cel·la amb col-span-{count} o row-span-{count}, on el sufix és el nombre de columnes o files. El valor per defecte llavors és col-span-1 o row-span-1.
La part important és que el comportament del flux encara continua.
Si afegeixes un span al primer element, el nostre exemple de 4 cel·les és així:
<div class="grid grid-cols-2 w-1/4 gap-4"> <div class="border bg-blue-300 text-center col-span-2">A</div> <div class="border bg-blue-300 text-center">B</div> <div class="border bg-orange-300 text-center">C</div> <div class="border bg-orange-300 text-center">D</div></div>Obtens això com a resultat:
També pots estendre elements per files:
<div class="grid grid-cols-2 w-1/4 gap-4"> <div class="border bg-blue-300 text-center row-span-2">A</div> <div class="border bg-blue-300 text-center">B</div> <div class="border bg-orange-300 text-center">C</div> <div class="border bg-orange-300 text-center">D</div></div>El resultat es veu així:
A partir d’aquest codi html:
<div class="grid w-1/4 text-center"> <div>☘️</div> <div>🐺</div> <div>🐸</div> <div>🐋</div> <div>🐦🔥</div> <div>🐇</div> <div>🦩</div></div>Crea aquesta graella:
<div class="col-span-2">☘️</div> <div>🐺</div> <div>🐸</div> <div class="row-span-2">🐋</div> <div>🐦🔥</div> <div>🐇</div> <div>🦩</div>Start/End
Pots ajustar la col·locació d’un element de graella especificant el seu inici i final amb col-start-{column} i col-end-{column} o row-start-{row} i row-end-{row}, on el sufix és el número de la ubicació o el valor de reinici, auto.
Els punts clau són que la ubicació d’inici més baixa és 1 i la ubicació final és exclusiva, el que significa que no forma part de l’element. Declarar un element com a class="col-start-2 col-end-4" significa que l’element abastarà la columna 2 i la columna 3, però no la columna 4.
Per defecte, les ubicacions d’inici i final es determinen automàticament per la col·locació dels elements anteriors a la graella, i l’span és 1. Pots especificar qualsevol dos dels elements d’inici, final i span, i el disseny funcionarà.
Per exemple, class="col-span-3, col-end-5" ocuparia les columnes 2, 3 i 4 — abastant 3 columnes i acabant abans de la cinquena columna.
Flexbox
Flexbox és una manera diferent de gestionar múltiples elements relacionats. Mentre que una graella està dissenyada com un disseny bidimensional, un disseny flexbox és unidimensional, col·locant els elements un rere l’altre en una fila o columna.
M’adono que sona avorrit. 🥱
Però és probable que flexbox sigui més útil per a tu que un disseny de graella per tres motius:
-
Un contenidor flexbox té millors controls per gestionar dinàmicament la mida dels elements.
-
Tot i que un contenidor flexbox és conceptualment una sola fila, es pot fer que embolcalli automàticament el seu contingut a la pantalla quan el contingut es fa massa ample.
-
Els contenidors flexbox es poden aniuar, el que significa que pots començar amb una fila flexbox, però els elements dins d’aquesta fila podrien ser ells mateixos columnes flexbox, que al seu torn podrien contenir files flexbox. Aniuar flexboxss et dona moltes opcions per controlar el disseny.
Les graelles encara són útils per gestionar contingut de naturalesa tabular, cosa que és certa per a algunes visualitzacions de dades, però no per a tots els tipus de disseny.
Pensa en una estructura de pàgina comuna, on tens una capçalera d’amplada completa, a sota una barra lateral esquerra i dreta amb contingut principal al mig, i a sota, un peu de pàgina d’amplada completa.
Podries pensar en aquest disseny com una graella: la capçalera és la primera fila de la graella que té un element amb un span de columna de tres. La segona fila té tres elements per a les barres laterals i el contingut principal, amb l’amplada ajustada, i la tercera fila té un altre element amb un span de columna de tres, així:
<div class="grid grid-cols-3 gap-4 w-1/3"> <div class="text-center col-span-3">Header</div> <div class="text-center w-1/5">Left Sidebar</div> <div class="text-center w-3/5">Content</div> <div class="text-center w-1/5">Right Sidebar</div> <div class="text-center col-span-3">Footer</div></div>No està malament, però també pots pensar en el disseny com un flexbox. El teu flexbox podria ser una columna amb tres elements, el segon element dels quals és una fila amb tres elements, així (veurem què signifiquen aquestes utilitats en un moment):
<div class="flex flex-col w-1/3"> <div class="flex-grow">Header</div> <div class="flex flex-row"> <div class="text-center w-1/5">Left Sidebar</div> <div class="text-center w-3/5">Content</div> <div class="text-center w-1/5">Right Sidebar</div> </div> <div class="flex-grow">Footer</div></div>O, pots pensar en la pàgina com una sola fila que s’embolcalla així:
<div class="flex flex-row flex-wrap w-1/3"> <div class="w-full">Header</div> <div class="text-center w-1/5">Left Sidebar</div> <div class="text-center w-3/5">Content</div> <div class="text-center w-1/5">Right Sidebar</div> <div class="w-full">Footer</div></div>Aquests tres enfocaments et donen més o menys el mateix disseny.
Resulta que el flexbox és més, bé, flexible que una graella. En particular, els dissenys flexbox són molt més fàcils d’adaptar a diferents mides de pantalla.