“krata” Kod odpowiedzi

krata

/* 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% */
}
Shirshak kandel

#krata

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

#areaA {
  background-color: lime;
}

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

Wybierz pozycję siatki 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

#krata

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

#areaA {
  background-color: lime;
}

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

krata

  <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

Odpowiedzi podobne do “krata”

Pytania podobne do “krata”

Więcej pokrewnych odpowiedzi na “krata” w CSS

Przeglądaj popularne odpowiedzi na kod według języka

Przeglądaj inne języki kodu