Question 259063 in Html Question posted in
Some basic documentation can be found here.

Html – grid-template-rows not creating desired rows and columns

Expected output : 2 rows and multiple columns

Output I got : multiple rows and 1 column

.container {
  display: grid;
  grid-template-rows: auto auto;
}
<h1>Simple grid example</h1>

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>
Tags:

2

Answers


  1. 0

    You would need to seperate the rows with a wrapper like so:

    <div class="container">
    <div>
        <div >One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
    </div>
    <div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
</div>
</div>
    Login or Signup to reply.
  2. 0

    You can add grid-auto-flow: column; to your CSS. (See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)

    This will specify that your cells will flow column-wise.

    .container {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
}
    <h1>Simple grid example</h1>

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search