CSS Grid by @ejeme365 - Codewith.it

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

Referenze

styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<li>Inserisce voci all'interno di una lista
hreflangConsente di dichiarare la lingua del documento collegato.
<table>Tag primario per la creazione di tabelle
<link>Collega il documento corrente con una risorsa esterna
<title>Definisce il titolo della pagina web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Bootstrap List Grid

semicerchio canvas

ESERCITAZIONE ORSI

JS Strutture dati e funzioni es3

Costruzione Immagine

Le meraviglie d\\

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);