css-grid отображает элементы div в строках, а не в столбцах - PullRequest
Новая
       2

css-grid отображает элементы div в строках, а не в столбцах

0 голосов
/ 10 мая 2019

enter image description here

Я не понимаю, почему он отображается внизу (Create | Solve | Staticis div). Предполагается, что элементы #left, #centre и #right находятся в одной строке, отображаемой в 3 столбцах под каждой другой.

Как я могу это сделать? Спасибо за вашу помощь! Вот мой код: 

body {
  font: Helvetica;
  padding: 50px;
}

#gridoutter {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  grid-auto-flow: column;
}

#gridoutter>div {
  background-color: orangered;
}

#gridinner>div {
  background-color: orange;
}

#gridinner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
<!DOCTYPE html>
<html>

<head>
  <title>{{ title }}</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>
  <div id="gridoutter">
    <div id="header">
      HEADER
    </div>
    <div id="content">
      <div id="gridinner">
        <div id="left" class="partial">
          <h2>Create</h2>
          <p>Design your tests</p>
          <div id="centre" class="partial">
            <h2>Solve</h2>
            <p>Absolve your written tests</p>
          </div>
          <div id="right" class="partial">
            <h2>Statistcs</h2>
            <p>Track your progress</p>
          </div>
        </div>
      </div>
      <div id="footer">
        FOOTER
      </div>
    </div>
</body>

</html>

1 Ответ

0 голосов
/ 10 мая 2019

Вы забыли закрыть div: 

body {
  font: Helvetica;
  padding: 50px;
}

#gridoutter {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  grid-auto-flow: column;
}

#gridoutter>div {
  background-color: orangered;
}

#gridinner>div {
  background-color: orange;
}

#gridinner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
<!DOCTYPE html>
<html>

<head>
  <title>{{ title }}</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>
  <div id="gridoutter">
    <div id="header">
      HEADER
    </div>
    
    <div id="content">
      <div id="gridinner">
        <div id="left" class="partial">
          <h2>Create</h2>
          <p>Design your tests</p>
        </div><!-- Didn't close this div -->
        
        <div id="centre" class="partial">
          <h2>Solve</h2>
          <p>Absolve your written tests</p>
        </div>
        
        <div id="right" class="partial">
          <h2>Statistcs</h2>
          <p>Track your progress</p>
        </div>
      </div>
    </div>

    <div id="footer">
      FOOTER
    </div>
  </div>
</body>

</html>
...