--- id: 5a90372638fddaf9a66b5d38 title: Usare grid-column per controllare la spaziatura challengeType: 0 videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr' forumTopicId: 301136 dashedName: use-grid-column-to-control-spacing --- # --description-- Fino a questo punto, tutte le proprietà che sono state discusse sono per i contenitori griglia. La proprietà `grid-column` è la prima da usare sugli elementi della griglia stessi. Le ipotetiche linee orizzontali e verticali che creano la griglia sono indicate come lines. Queste linee sono numerate a partire da 1 nell'angolo in alto a sinistra della griglia incrementando verso destra per le colonne e verso il basso per le righe. Ecco come appaiono le linee di una griglia 3x3:

linee delle colonne

linee delle righe

Per controllare il numero di colonne che un elemento consumerà, è possibile utilizzare la proprietà `grid-column` in combinazione con i numeri ai quali desideri avviare e fermare l'elemento. Ecco un esempio: ```css grid-column: 1 / 3; ``` Questo farà iniziare l'oggetto dalla prima linea verticale della griglia a sinistra e lo estenderà fino alla terza linea della griglia, occupando due colonne. # --instructions-- Fai in modo che l'elemento di classe `item5` occupi le ultime due colonne della griglia. # --hints-- La classe `item5` dovrebbe avere una proprietà `grid-column`. ```js assert( __helpers .removeWhiteSpace($('style').text()) .match(/\.item5{.*grid-column:.*}/g) ); ``` La classe `item5` dovrebbe avere una proprietà `grid-column` che produca l'occupazione delle ultime due colonne della griglia. ```js const colStart = getComputedStyle($('.item5')[0]).gridColumnStart; const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd; const result = colStart.toString() + colEnd.toString(); const correctResults = [ '24', '2-1', '2span 2', '2span2', 'span 2-1', '-12', 'span 2span 2', 'span 2auto', 'autospan 2' ]; assert(correctResults.includes(result)); ``` # --seed-- ## --seed-contents-- ```html

``` # --solutions-- ```html

```