CODEWITHSUNDEEP
javascripthtmlcss
user18510772
user18510772

Reputation:

How to get my grid stay inside of its container?

I am trying to fit my grid of 16x16 or 64x64 (the size shound't matter) inside of my grid. I was thinking of using flexbox, but im not sure how to go about implementing that. I'd like for my grid to shrink and expand according to the size of the container, rather than being popped outside of the container.

```<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <script src="./index.js" defer></script>
    <title>Document</title>
</head>
<body>
    <div class="flex-container">
        <div id="container"></div>
    </div>


</body>
</html>```


CSS:

```:root {
    --grid-cols: 1;
    --grid-rows: 1;
  }
  

#container {
    background-color: white;
    width: 50%;
    height: 100%;
}

.flex-container {
    background-color: coral;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70%;
}


  #container {
    display: grid;
    grid-gap: 1em;
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-template-columns: repeat(var(--grid-cols), 1fr);
  }
  
  .grid-item {
    padding: 1em;
    text-align: center;
  }

  .grid-item:hover {
      background-color: beige;
  }```

Javascript:
```const container = document.getElementById("container");

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    container.appendChild(cell).className = "grid-item";
  };
};

makeRows(16, 16);```

Upvotes: 0

Views: 582

Answers (1)

Adarsh Bhardwaj
Adarsh Bhardwaj

Reputation: 88

Try this change size according to your need

grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
  grid-auto-rows: minmax(100px, auto);

Upvotes: 1

Related Questions