Bordo per grid template oversize (150%)

[WebNovellinoDsg]

Salve ragazzi ho bisogno di risolvere un problema con border,
ho creato una griglia con più box (15 div dentro 1 div), il div padre ha il grid template di 150% (voi vi chiederete se ho problemi e perchè non l'ho fatto da 100% visto che di % si parla che sono regolabili alla dimensione del body, almeno per quello che ho capito, ma non importa), non voglio cambiare nulla o quasi della stringa più che altro dei tag utilizzati, anche perchè sembra funzionino benissimo se non per il border che va ad applicarsi solo fino alla misura del 100% del template e il restante 50% rimane senza, ecco, vorrei si applicasse anche a quel 50% rimanente, ho provato con del ovreflow che aggiungendo auto risolva apparentemente il problema da qualche lato ma dall'altro mi piazza una scrollbar inutile che sono riuscito anche a togliere con un altro tag css ma che a sua volta crea ulteriori problemi di visualizzazione e scorrimento, quindi dopo 2 giorni di delirio ho deciso di iscrivermi come novellino di css e chiedere aiuto a voi. Allego 2 immagini per aiutarvi a capire. Accetto anche suggerimenti differenti dalla soluzione che vorrei utilizzare ma con preferenza per eventuali aggiunte e non modifiche che migliorino l'applicazione del bordo, preciso che ho letto anche qualcosa riguardo il gap ecc ma non è quello che mi serve, insomma, voglio il bordo che copra il 150% senza troppi cambiamenti, scusate il testamento ma volevo essere chiaro.

[KillerWorm]

Ciao e benvenuto sul forum, per poterti rispondere in maniera mirata la vera questione da porti è "cosa stai cercando di fare?".

Il problema è il fatto che tu abbia deciso di eccedere oltre il 100% di quell'elemento.

visto che di % si parla che sono regolabili alla dimensione del body, almeno per quello che ho capito

No, in questo caso la percentuale totale del template si riferisce alle dimensioni dell'elemento stesso, non a quelle del body.

Ad ogni modo, per risponderti, il bordo è applicato correttamente rispetto alle dimensioni stabilite per quell'elemento, tant'è che il bordo delimita esattamente l'area di 1339 x 1024 px (cioè le dimensioni che hai applicato all'elemento).

Ciò che sta avvenendo non è la "non applicazione" del bordo al restante 50%, bensì il fatto che il suo contenuto ecceda dall'elemento stesso. In sostanza avviene un overflow che, oltre al fattore bordo, influisce sul regolare flusso dei contenuti, cioè i div che eccedono da quell'elemento risulteranno sovrapposti da eventuali altri contenuti che seguono l'elemento stesso; questo perché l'ingombro di quell'elemento, nel regolare flusso dei contenuti, è stabilito in base alle sue dimensioni, non a quelle del suo contenuto.

voi vi chiederete se ho problemi e perchè non l'ho fatto da 100%

Sì, a meno che non ci sia qualche altro motivo valido (oltre al fatto del body non pertinente in questo caso), sarebbe forse più opportuno applicare delle percentuali il cui totale sia 100%.

Certamente puoi risolvere in vari altri modi ma non è chiaro il contesto e l'obiettivo che vuoi raggiungere, per cui non ti si può rispondere se non andando per ipotesi, soltanto perché ti sei imposto di mantenere quel 150%.

Puoi chiarire?

[WebNovellinoDsg]

No, in questo caso la percentuale totale del template si riferisce alle dimensioni dell'elemento stesso, non a quelle del body.

Ciao, si questo lo so, non mi sarò espresso in modo totalmente chiaro a riguardo e per questo hai frainteso, comunque grazie innanzitutto per il benvenuto.
Riguardo la risposta credo di averti capito chiaramente e ti ringrazio.
Invece collegando la tua risposta alla tecnica dell'overflow auto che avevo dato all'elemento contenitore div, risolvendo per metà e male il problema, mi chiedevo se è possibile applicare un overflow solo ed esclusivamente al bordo assegnato al div contenitore e non a tutto il div stesso... Questo lo chiedo per curiosità.

Per risponderti:
Semplicemente volevo riportare un progetto su carta che non ha pixel sulla pagina internet e, fare i calcoli delle misure in modo preciso mi veniva difficile anche con la calcolatrice (a matematica sono messo poco bene anche se il 50% del mondo è messo peggio...), quindi ho optato per la soluzione di superare il 100% sapendo che si potesse fare, ma non sapevo questa cosa che mi hai spiegato che il contenuto seguente gli finirà sopra... Quindi in breve non volevo fare nulla di particolare, a parte evitare calcoli di proporzione per mantenere le misure dei box uguali a quelli su carta.
Comunque aspettando la risposta al mio quesito, ho fatto le proporzioni e credo userò quelle per risolvere il problema rientrando nel 100%.
Altra domanda però, ora, è perchè i valori come 16,5% non vengano letti adeguatamente da css/html e mi crea i box tutti della stessa misura, c'è un tag che non conosco che possa risolvere il problema?

Quindi facendo i conti mi ritrovo a farvi altre 2 domande e spero possiate rispondermi.

Ringrazio ancora per le vostre risposte e vi auguro una buona serata.

[KillerWorm]

e, fare i calcoli delle misure in modo preciso mi veniva difficile
[...]
ho fatto le proporzioni e credo userò quelle per risolvere il problema rientrando nel 100%.

Ok, l'ho pensato ma ho voluto chiederti chiarimenti per capire meglio cosa si nascondeva sotto quella tua scelta.
Parliamo infatti di semplici proporzioni. Ma, a dir la verità, potresti usare anche differenti unità di misura che semplificano la procedura senza fare troppi calcoli pur arrivando alla totalità del 100%.

Puoi usare ad esempio l'unità di misura "fr" (cioè "frazione"). Con tale unità viene calcolato automaticamente lo spazio disponibile e quindi distribuito secondo il numero di frazioni usate per ciascun elemento, rispetto alla loro somma totale (che corrisponde al 100%).

In questo caso potresti usare gli stessi valori che hai usato per le percentuali ma sostituendo "fr" a "%".

Avrai ad esempio:

grid-template-rows: 25fr 25fr 25fr 25fr 15fr 25fr 10fr;

ma otterrai comunque il 100% dell'altezza totale.

Questo sicuramente ti evita di fare calcoli a mano.

mi chiedevo se è possibile applicare un overflow solo ed esclusivamente al bordo assegnato al div contenitore e non a tutto il div stesso

Non penso sia possibile, la proprietà overflow agisce sulla visualizzazione dell'intero elemento. Ma, ripeto, sarebbe anche possibile applicare in qualche modo un bordo esterno che racchiuda tutti quegli elementi ma il metodo che stai usando è comunque inadeguato

perchè i valori come 16,5% non vengano letti adeguatamente

Forse perché stai usando la virgola come separatore della parte decimale per cui il valore risulta non valido e sarà applicato un valore automatico di default. In genere nei linguaggi di programmazione va usato il punto

16.5%

[WebNovellinoDsg]

sarebbe anche possibile applicare in qualche modo un bordo esterno che racchiuda tutti quegli elementi

Come?

ma il metodo che stai usando è comunque inadeguato

Vero.
Rispetto tutto il resto, come chiarisce il mio nickname, sono un novellino di css, quindi sono acerbo per riuscire a risolvere facilmente tutte le problematiche durante la pratica, cerco di imparare quanto più possibile in maniera gratuita e, lo faccio da solo un mesetto, tramite you tube, w3scool, questo sito ecc. Le tue risposte mi aiuteranno molto. Non so qual'è la capacità media di apprendimento html/css delle persone in un mese, mi chiedo se sono a buon punto, spero di si e di ricavare qualcosa di buono da questi studi piuttosto che accantonare poi tutto come molti altri studi di vita...
Grazie.

[KillerWorm]

Come?

Non senza l'uso di qualche espediente artificioso.

Ad esempio, si potrebbe inserire un ulteriore div come contenitore di box (chiamiamolo wrapper) a cui si applicano sia le dimensioni totali sia il bordo, così come hai fatto per il tuo box (considerando però di maggiorare eventualmente il valore dell'altezza al 150%, cioè 1024px * 1.5).

Al box invece (avendo tolto chiaramente il bordo che ora è su wrapper) si applica una larghezza del 100% (cioè 100% della larghezza di wrapper) e un'altezza pari al 100% diviso il 150% (cioè 100% / 1.5).

Certamente bisognerebbe usare anche qui qualche proporzione per calcolare questi valori ma in tal caso andrebbe fatto solo per questi due valori. Ad ogni modo il passaggio può essere applicato automaticamente usando la funzione calc() di CSS.

Avrai quindi un CSS del genere:

.wrapper {
  width: 1349px;
  height: calc(1024px * 1.5);
  border: 5px solid cyan;
}

.box {
  width: 100%;
  height: calc(100% / 1.5);
  /* resto delle proprietà grid */
}

e un HTML del genere:

<div class="wrapper">
  <div class="box">
    <div></div>
    <div></div>
    <div></div>
    ...
  </div>
</div>

.
Potrebbero esserci anche altre soluzioni del genere, più o meno macchinose, ma non vedo la necessità di indagare oltre se puoi risolvere il problema alla radice, con l'uso di metodi più consueti, magari calcolando opportunamente i valori percentuali o usando "fr" come spiegato.

Non so qual'è la capacità media di apprendimento html/css delle persone in un mese, mi chiedo se sono a buon punto, spero di si e di ricavare qualcosa di buono da questi studi piuttosto che accantonare poi tutto come molti altri studi di vita...

Sinceramente non so dirti quale possa essere la curva media di apprendimento; a livello personale posso giusto dirti che dopo circa 20 anni in cui mi diletto su questa materia, ancora oggi mi capita di scoprire delle cose nuove.

Ti auguro comunque, a prescindere da come vadano le cose, che possa essere per te una buona esperienza su cui costruire qualcosa sopra in modo soddisfacente

[WebNovellinoDsg]

Grazie mille delle spiegazioni.