Quando si progetta una pagina Web allineare gli elementi in posizioni adeguate è di grande importanza e renderli reattivi, il che significa che modificheranno il loro comportamento a seconda dei diversi tipi di dispositivi che visualizzano la pagina web. Un modo per svolgere entrambi i compiti di cui sopra è costruire un sistema di vista a griglia. Qui in questo articolo, ti guideremo passo dopo passo su come creare una vista a griglia reattiva da zero.

Prima di saltare verso la sua costruzione, esploriamo ciò che è effettivamente una visione della griglia.

Cos'è una vista a griglia?

Una vista a griglia è una tecnica che divide una pagina web in varie colonne che semplificano il posizionamento degli elementi. Una vista a griglia, che è in natura reattiva, in genere è costituita da 12 colonne insieme a una larghezza del 100% e si ridimensiona su e giù a seconda delle dimensioni del browser Web.

Ora vediamo come costruire una vista a griglia reattiva da zero.

Costruire una vista a griglia reattiva

Di seguito abbiamo dimostrato la procedura passo-passo per la costruzione di una visualizzazione reattiva della griglia.

Prerequisito

Prima di saltare verso la codifica devi disegnare la vista della griglia sulla carta in modo da sapere esattamente dove posizionare quale elemento. Ad esempio, ecco lo schizzo della vista della griglia che stiamo per costruire.

Ora che abbiamo il nostro schizzo, iniziamo la parte di codifica.

Passo 1

La necessità di base per rendere reattiva una pagina web è quella di aggiungere un meta tag reattivo nel tuo file HTML.

Html

L'attributo di larghezza = larghezza del dispositivo significa che la larghezza della pagina web cambierà in corrispondenza alla larghezza del dispositivo, mentre su scala iniziale = 1.0 Attributo indica quando la pagina Web viene caricata dal browser per la prima volta il livello di zoom sarà 1.

Passo 2

Aggiungi alcuni elementi HTML che si desidera visualizzare nella pagina web.

Html

Suggerimento Linux

Per aggiungere contenuti nella nostra sezione intestazione stiamo realizzando un contenitore di div e avvolgiamo la nostra intestazione all'interno di questo contenitore.

Html

• Chi siamo


• Autori


• Articoli pubblicati


• Categorie di articoli

Tutto sui linguaggi di programmazione!

Qui troverai articoli ben scritti e ben strutturati relativi a tutti i linguaggi di programmazione composti dai nostri autori raffinati.

Ai fini dell'inserimento di contenuti nella barra late. Per quanto riguarda la sezione principale, abbiamo aggiunto due paragrafi e nidificati all'interno di un altro div con nomi di classe "Col-9 Main". Entrambi gli elementi Div sono ulteriormente nidificati in un div più grande con il nome di classe "contenitore".

Le lezioni assegnate agli elementi Div nidificati saranno spiegate in seguito.

Fare un passo 3

Ora abbiamo finito con la nostra parte HTML e ora passiamo alla nostra parte CSS del codice. La prima cosa che deve essere fatta nel foglio di stile è impostare la proprietà di dimensionamento degli elementi HTML su Border-Box.

CSS

*
Dimensizzazione di scatole: bordo-box;

Il motivo alla base di questo è che questa proprietà include l'imbottitura e il bordo in altezza totale e larghezza degli elementi HTML.

Fare un passo 4

Ora convertiamo la nostra pagina in una visualizzazione reattiva della griglia di 12 colonne. Per fare ciò dobbiamo eseguire determinati calcoli per fornire determinate larghezze a ciascuna colonna e ottenere il controllo sulla pagina Web quando si tratta di organizzare gli elementi.

La larghezza di una singola colonna = 1/12 della larghezza della schermata totale = 100%/12 = 8.33%.

La larghezza di due colonne combinate = 2/12 della larghezza della schermata totale = 2 (100%)/12 = 16.66%

La larghezza di tre colonne combinate = 3/12 della larghezza totale dello schermo = 3 (100%)/12 = 25%

La larghezza di quattro colonne combinate = 4/12 della larghezza totale dello schermo = 4 (100%)/12 = 33.33%

E così via.

CSS

.Col-1 larghezza: 8.33%;
.Col-2 larghezza: 16.66%;
.Col-3 larghezza: 25%;
.Col-4 larghezza: 33.33%;
.Col-5 larghezza: 41.66%;
.Col-6 larghezza: 50%;
.Col-7 larghezza: 58.33%;
.Col-8 larghezza: 66.66%;
.Col-9 larghezza: 75%;
.Col-10 larghezza: 83.33%;
.Col-11 larghezza: 91.66%;
.Col-12 larghezza: 100%;

La larghezza di tutte le colonne è stata definita nel CSS.

Nota:

Volevamo posizionare la nostra barra laterale e la sezione principale in due colonne. Una vista a griglia con due colonne assomiglia a questa.

Quando guardiamo le larghezze delle varie colonne nel codice sopra, scopriamo che tre colonne avranno una larghezza del 25% e nove colonne avranno una larghezza del 75%. Pertanto, il div che nidifica all'elenco dei menu è stato assegnato il .Col-3 classe, mentre è stato dato il Div con il contenuto della sezione principale .Col-9 classe.

Passaggio 5

Ora usando la classe ".Col- ", forniamo un po 'di imbottitura alle colonne e fluttuarle a sinistra.

CSS

[class*= "col-"]
Float: a sinistra;
imbottitura: 10px;

Il float: la proprietà a sinistra colloca queste colonne a sinistra del contenitore tenendole in modo che il testo e altri elementi in linea si avvolgeranno all'interno delle colonne. Tuttavia, questo posizionerà gli elementi come se le colonne non fossero affatto lì. Pertanto, dobbiamo cancellare il flusso. Per fare ciò, segui lo snippet di codice di seguito.

CSS

.Container :: dopo
contenuto: "";
chiaro: entrambi;
Visualizza: tabella;

Il: dopo la classe e la proprietà del contenuto vengono utilizzati per aggiungere contenuto dopo il contenitore. Nel frattempo, il valore della tabella della proprietà di visualizzazione farà apparire il contenuto sotto forma di una tabella I.E in righe e colonne.

Passaggio 6

.intestazione
Background-color: bisque;
colore bianco;
imbottitura: 20px;

.Sidebar ul
Margine: auto;
imbottitura: 0px;

.Sidebar li
imbottitura: 10px;
margine-bottom: 10px;
Background-color: Rosybrown;
colore bianco;

Infine, ora stiamo accontentando i nostri elementi usando le classi assegnate ai contenitori di divina dell'intestazione e la barra laterale.

Produzione

La pagina Web è stata mostrata su larghezze di schermo casuali.

Questa è la nostra pagina web a 1250px.

La nostra pagina web alla larghezza di 600px.

Conclusione

Per creare una visualizzazione reattiva della griglia è necessario prima disegnare il layout che desideri che la tua pagina web abbia quindi dividere la tua pagina in varie colonne. Ad esempio, nell'esempio utilizzato in questo articolo, abbiamo diviso la nostra pagina in 12 colonne calcolando la percentuale di ciascuna colonna. Successivamente, puoi usare quella percentuale per posizionare i tuoi elementi accuratamente su varie colonne. In questa guida, ti abbiamo mostrato una procedura passo-passo per creare una vista a griglia da zero.