display grid template rows не работает

Question

при добавлении элемента после 3его элемента элементы должны появится сбоку а не снизу так как написано в grid-template-rows: 1fr 1fr 1fr; но этого не происходит, почему?

document.querySelector(".btn").onclick = ()=>{
    let x = document.createElement("div")
    x.classList.add("item")
    document.querySelector(".content").appendChild(x)
    let y = document.querySelectorAll(".item")
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.container{
    width: 600px;
    height: 400px;
    background-color: blanchedalmond;
}
.content{
    border:1px solid black;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
}
.item{
    width:300px;
    height:50px;
    background-color: cornflowerblue;
    border:1px solid black;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel = "stylesheet" href = "style.css">
</head>
<body>      
            <div class="container">
                <div class="content">
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                </div>

            <button class = "btn">+</button>    
            </div>
            <script src="script.js"></script>
</body>
</html>

Answer 1

const btn = document.querySelector(".btn");
const content = document.querySelector(".content");

btn.addEventListener('click', () => {
  const div = document.createElement("div");
  div.classList.add("item");
  content.append(div);
  const items = content.querySelectorAll(".item");
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 600px;
}

.content {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-template-rows: 50px 50px 50px;

  border: 1px solid black;
  background-color: blanchedalmond;
}

.item {
  background-color: cornflowerblue;
  border: 1px solid black;
}

<div class="container">
  <div class="content">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <button class="btn">+</button>
</div>

БЛОГ НА HUSL

display grid template rows не работает

Ответы (1 шт):