شبكة css - امتداد متغير للعناصر

3

أحاول القيام بالشبكة التالية:

1/3 | 1/3 | 1/3   (3 equal elements)
   1/2 | 1/2      (2 equal elements)
   1/2 | 1/2      (2 equal elements)

لهذا السبب ، أحتاج إلى تقسيم كل صف إلى 6 أعمدة لاستيعاب كل من 1/2 و 1/3. يبدو أنني أسيء فهم أمر عمود الشبكة بينما أريد تعيين عدد الأعمدة التي يأخذها كل عنصر. الكود التالي لا يعمل بشكل صحيح.

.grid-front {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1em;
}

.grid-front > div {
  background-color: red;
}
.top-left {
  grid-column: 1 / 3;
}

.top-centre {
  grid-column: 3 / 5;
}

.top-centre {
  grid-column: 5 / 7;
}
<section class="grid-front">
   <div class="top-left">1</div>
   <div class="top-centre">2</div>
   <div class="top-right">3</div>
   <div class="middle-left">4</div>
   <div class="middle-right">5</div>
   <div class="bottom-ll">6</div>
   <div class="bottom-lr">7</div>
   <div class="bottom-right">8</div>
 </section>

يعرض كل عناصر الشبكة. العنصر الأول (أعلى اليسار) يأخذ "مسافتين" ، ثم هناك فجوة بيضاء (تمتد على مسافتين) حيث يجب أن يكون العنصر الثاني. ثم هناك عنصر ثانٍ (يمتد على مسافتين) حيث كان يجب أن يكون العنصر الثالث. ثم هناك العناصر المتبقية موزعة بالتساوي في الصف الثاني.

ما الذي يساء فهمي عنه؟

1 إجابة

1
افضل جواب

عندك .top-centre أعلن 2x. الإصدار الثاني هو تجاوز الأول.

.grid-front {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1em;
}

.grid-front>div {
  background-color: red;
}

.top-left {
  grid-column: 1 / 3;
}

.top-centre {
  grid-column: 3 / 5;
}

/* ADJUSTMENT */
.top-right {
  grid-column: 5 / 7;
}
<section class="grid-front">
  <div class="top-left">1</div>
  <div class="top-centre">2</div>
  <div class="top-right">3</div>
  <div class="middle-left">4</div>
  <div class="middle-right">5</div>
  <div class="bottom-left">6</div>
  <div class="bottom-right">7</div>
</section>

:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام