Layout
Introducció
A 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 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.
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ò:
A
B
C
D
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.
A
B
C
D
Estàs llegint una vista prèvia.
Inicia sessió per llegir l'article complet. Qualsevol compte obre 4 articles gratuïts al mes; l'alumnat i el professorat llegeixen les pàgines del seu curs sense límit.
Inicia sessió