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

Html – CSS grid not resizing

I’ve been trying to make a 3 column and 2 row responsive grid, but for some reason it won’t resize when the screen size is reduced. I want the container to shrink but it just stays the same size and gets cut off by the screen. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="6">6</div>
    </div>
    <script src="app.js"></script>
</body>
</html>type here

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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    display: inline-grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px,100%), 1fr));
    grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
    max-width: 600px;
    text-align: center;
    gap: 1rem;
}

.container div {
    padding: 5em;
    background-color: red;
}
type here

I’ve tried using repeat, minmax, and auto-fit but none of it has made the container resize.

Tags:

2

Answers


  1. 0

    Have you tried .container {width:fit-content;}?
    That should adjust the size of container based on width of content.
    I am kind of confused by what you mean.

    Login or Signup to reply.
  2. 0

    I think if you add a width to the container

    .container {
  display: inline-grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 50%), 1fr));
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  width: 100%;
  max-width: 600px;
  text-align: center;
  gap: 1rem;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search