CSS Grid by @ejeme365 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

widthImposta la larghezza di un elemento HTML
<option>Serve ad inserire una voce in un menu di selezione.
formmethodDefinisce il metodo di invio dei dati oltre a method
animationDefinisce i parametri dell'animazione di un elemento o selettore
multipart/form-dataCodifica dei caratteri di un form
acceptDefinisce e filtra il formato dei file per il tag <input type=file>

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Il museo di Leonardo

Business Website

input non capiti

Pagina sul lorem ipsum

Editor di testo HTML

Esercizio forse più giust

Primo esercizio in classe

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!Doctype html>
<html lang="en">

<head>
  <title> Flex Box in CSS </title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<body>
 
  <div class="container"> <!--Other div -->
    <div class="box" style="background-color:blue;"> One</div>
    <div class="box" style="background-color:orange"> Two </div>
    <div class="box" style="background-color:red"> Three </div>
    <div class="box" style="background-color:brown"> Four </div>
    <div class="box" style="background-color:green"> Five </div>
    <div class="box" style="background-color:lightgray"> six</div>
    <div class="box" style="background-color:yellow"> seven </div>
    <div class="box" style="background-color:orange"> Eight </div>
    <div class="box" style="background-color:violet"> Nine </div>
    
  </div>
</body>

</html>

.container{
  margin: 10px;
  width: 85%;
  height: 100vh;
 display: grid;
  grid-template-columns: 1fr 1fr 1fr ;
  /* grid-template-rows: 1fr 1fr 1fr; */
  text-align: center;
  /* column-gap: 20px; */
  /* grid-column-gap: 20px;
    grid-row-gap: 20px; */
  /* grid-template-rows: 100px 100px 100px; */
 
 
}
.container > .box{ 
  font-size: 1.5rem;
padding: 20px; 
 /* grid-column-start: 1; */
 /* grid-column-end: 2; */
  /* grid-row-start: 1; */
  /* grid-row-end: 3; */

  
}


/* grid-column-gap: 20px;
    grid-row-gap: 20px; 
    applies gap to the column and to the row*
    
    gap: 20px;  OR grid-gap: 20px;
    
    applies gap to both of them row and col/

/* Some and Every  mehod of an array*/
/* some() method return true if some of the array element passes the test otherwise false , while every() method return true if all the array element passes the test otherwise false */
const numbers = [1, 3, 4, 6, 7, 8];
const even = numbers.some(function (result) {
  return result % 2 === 0;
})

console.log(even);