“#la grille” Réponses codées

la grille

/* giving container class grid will not work we have to give rows and columns 
 1fr means taking 1 part of available space.*/
.container{
display:grid;
grid-template-rows: 150px 150px;
grid-template-columns:1fr 1fr 1fr ; /* container contain 6 items inside it*/
/* in short we can also use repeat function */
grid-template-columns:repeat(3 ,1fr);
grid-template-columns:50% repeat(2,1fr); /*it means first column will take 50% and other 2 50% */
}
Sab Tech

#la grille

#grid {
  display: grid;
  width: 80%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
Nutty Narwhal

Choisissez la position de la grille HTML

/* grid-column: <start> / <end>;  */
/* grid-row: <start> / span <length>;  */
/* i.e */
grid-column: 3 / span 2;
grid-row: 2 / 4;
grid-row: 4;
Naughty Newt

#la grille

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
Nutty Narwhal

la grille

  <Grid container spacing={4}>
      <Grid item md={4}>
        <div style={{ backgroundColor: "red" }}>1</div>
      </Grid>
      <Grid item md={4}>
        <div style={{ backgroundColor: "red" }}>1</div>
      </Grid>
      <Grid item md={4}>
        <div style={{ backgroundColor: "red" }}>1</div>
      </Grid>
    </Grid>
Blue Baboon

Parcourir les réponses de code populaires par langue

Parcourir d'autres langages de code