CSS Grid не соответствует - PullRequest
Новая
       48

CSS Grid не соответствует

0 голосов
/ 09 октября 2018

Красные и синие секции расположены рядом друг с другом, но желтая секция находится не на одной линии и под синей секцией, они также имеют ту же высоту, что и красная секция, я не могу понять, где я ошибся

.contact-information {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(90px, auto);
  width: 100%;
  overflow: hidden;
}

.contact-left-section {
  grid-column: 1/3;
  grid-row: 1/2;
  background-color: red;
}

.contact-middle-section {
  grid-column: 3/6;
  grid-row: 1/2;
  background-color: blue;
}

.contact-right-section {
  grid-column: 6/9;
  grid-row: 1/2;
  background-color: yellow;
}
<section class="about light contact-information">
  <div class="contact-left-section">
    <div class="section-title">Phone</div>
    <div class="section-content">
      <p>Lorem ipsum</p>
    </div>
  </div>

  <div class="contact-middle-section">
    <div class="section-title">Services</div>
    <div class="section-content">
      <p>Lorem ipsum</p>
    </div>

    <div class="contact-right-section">
      <div class="section-title">Email</div>
      <div class="section-content">
        <p>Lorem ipsum</p>
      </div>
    </div>
</section>

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Во-первых, вы определили только восемь столбцов вместо nine , но, что более важно, вы не закрыли .contact-middle-section div, оставив макет неработающим. 

.contact-information {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(90px, auto);
  width: 100%;
  overflow: hidden;
}

.contact-left-section {
  grid-column: 1/3;
  grid-row: 1/2;
  background-color: red;
}

.contact-middle-section {
  grid-column: 3/6;
  grid-row: 1/2;
  background-color: blue;
}

.contact-right-section {
  grid-column: 6/9;
  grid-row: 1/2;
  background-color: yellow;
}
<section class="about light contact-information">
  <div class="contact-left-section">
    <div class="section-title">Phone</div>
    <div class="section-content">
      <p>Lorem ipsum</p>
    </div>
  </div>

  <div class="contact-middle-section">
    <div class="section-title">Services</div>
    <div class="section-content">
      <p>Lorem ipsum</p>
    </div>
  </div>

  <div class="contact-right-section">
    <div class="section-title">Email</div>
    <div class="section-content">
      <p>Lorem ipsum</p>
    </div>
  </div>
</section>
0 голосов
/ 09 октября 2018

Вы можете попробовать заменить: grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

на: grid-template-columns: repeat(9,1fr);

Надеюсь, это решение поможет ...

...