Pouvez-vous vérifier si la solution Context::executeTransient() fonctionne pour vous

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr) 0.1fr;
  grid-gap: 10px;
  height: 100vh;
}

.a {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 1 / 4;
  grid-row: 4 / 7;
}

.b {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

.c {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 5 / 7;
  grid-row: 1 / 3;
}

.name {
  grid-column: 1 / 3;
  grid-row: 7 / 7;
}

.contact {
  grid-column: 4 / 6;
  grid-row: 7 / 7;
}
<div class="grid">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="name">
    <p>Name</p>
  </div>
  <div class="contact">
    <p>Contact</p>
  </div>
</div>

कोई सुराग?

0
S L 3 अप्रैल 2021, 16:02

1 उत्तर

सबसे बढ़िया उत्तर

आपको html और body के लिए अपना मार्जिन रीसेट करना होगा। यदि आप अभी भी पैडिंग रखना चाहते हैं, तो आप इसे अपनी .grid कक्षा को दे सकते हैं लेकिन ऊंचाई से बराबर मान कम कर सकते हैं।

html, 
body {
  margin: 0
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr) 0.1fr;
  grid-gap: 10px;
  height: 96vh;
  padding: 2vh
}

.a {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 1 / 4;
  grid-row: 4 / 7;
}

.b {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

.c {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 5 / 7;
  grid-row: 1 / 3;
}

.name {
  grid-column: 1 / 3;
  grid-row: 7 / 7;
}

.contact {
  grid-column: 4 / 6;
  grid-row: 7 / 7;
}
<div class="grid">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="name">
    <p>Name</p>
  </div>
  <div class="contact">
    <p>Contact</p>
  </div>
</div>
0
George Diril 3 अप्रैल 2021, 16:25