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

Html – grid items in the parent grid are not resizing horizontally

I’m new to web dev world. Currently I’m struggling on how to dynamically resize all items inside my grid class = "card" horizontally. Usually all my other project are having the same layout as this project and I don’t know where did I screw up. Despite setting the min and max width, it doesn’t seem to respect those values as it didn’t resize the items correctly.Can you help me what is missing on my code? An explanation is much appreciated.

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
    2. Remove default margin
  */
* {
  margin: 0;
}

/*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
    5. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
    6. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}

/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
    8. Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}

:root {
  /* Primary Colors */
  --clr--gradient: hsl(6, 100%, 80%) to hsl(335, 100%, 65%);
  /* Neutral Colors */
  --clr--pale-blue: hsl(243, 100%, 93%);
  --clr--grayish-blue: hsl(229, 7%, 55%);
  --clr--dark-blue: hsl(228, 56%, 26%);
  --clr--very-dark-blue: hsl(229, 57%, 11%);
}

:root {
  /* Font Family */
  --ff--primary: "Raleway", sans-serif;
  /* Font Size */
  --fs--regular: 14px;
  /* Font Weight */
  --fw--bold: 400;
  --fw--very-bold: 700;
}

html {
  margin: 0;
  padding: 0;
}
html ul {
  list-style: none;
  text-decoration: none;
  padding-left: 0;
}

body {
  background: url("/images/bg-mobile.png") no-repeat;
  background-position: top;
  background-size: 100% 100%;
  background-color: var(--clr--very-dark-blue);
  color: var(--clr--pale-blue);
  font-family: var(--ff--primary);
}

.card {
  display: grid;
  gap: 1rem;
  max-width: 500px;
}
.card__header, .card__info {
  background-color: var(--clr--dark-blue);
  padding: 2rem;
  text-align: left;
  border-radius: 0.8rem;
}
.card__header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.card__header .logo img {
  width: 150px;
}
.card__header .flex-group {
  display: flex;
  gap: 0.5rem;
}
.card__header .flex-group li {
  display: grid;
  place-items: center;
  width: 50px;
  height: 40px;
  background-color: var(--clr--very-dark-blue);
  padding: 0;
  margin: 0;
  border-radius: 0.5rem;
}
.container {
  min-height: 100vh;
  display: grid;
  place-items: center;
}/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
    <link rel="stylesheet" href="dist/style.css" class="css" />
    <title>Frontend Mentor | Fylo data storage component</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet đź‘Ť -->
    <style>
      .attribution {
        font-size: 11px;
        text-align: center;
      }
      .attribution a {
        color: hsl(228, 45%, 44%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <main class="card">
        <section class="card__header">
          <div class="logo">
            <img src="/images/logo.svg" alt="Logo" />
          </div>
          <ul class="flex-group">
            <li><img src="/images/icon-document.svg" alt="Document" /></li>
            <li><img src="/images/icon-folder.svg" alt="Folder" /></li>
            <li><img src="/images/icon-upload.svg" alt="Upload" /></li>
          </ul>
        </section>
        <section class="card__info">
          <p>You’ve used 815 GB of your storage</p>
          <input type="range" min="1" max="1000" value="815" />
          <div>185 GB LEFT</div>
        </section>
      </main>
    </div>
    <footer class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="#">Your Name Here</a>.
    </footer>
  </body>
</html>
Tags:

2

Answers


  1. 0

    Looks like the problem is that you’re setting the max-width of .card, but you haven’t defined a specific grid template for the items inside it.

    .card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Adjust the min-width as needed */
  gap: 1rem;
  max-width: 500px;
}

    If that doesn’t do the trick check this out

    Login or Signup to reply.
  2. 0

    I see that your boxes inside class = "card" is resizing very well when adding more list items <li> in the list <ul class="flex-group">.

    Please clarify, What boxes that do not resize dynamically?

    Also, despite max-width: 500px property in .card rule, the boxes inside the grid will expand, if more list items are added, causing overflow. To prevent this overflow and maintain the layout, you can add flex-wrap: wrap property in .card__header .flex-group rule.

    Btw, It is nice to use BEM methodology despite you are new.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search