Question 244901 in CSS Question posted in
Some basic documentation can be found here.

How can I make a grid inside a flex container responsive in CSS without disrupting the layout of the outer flex container?

I am trying to use a grid display a list of items inside flex display. I was able to display correctly but the grid is overflowing outside the container.

My expected result was the container grows as the data on that is displayed on the grid without overflowing.

As the list goes on increasing, the list is overflowing the height of the container rather than container height increasing.

  • How can I expand the flex container without causing overflow?

Note: I’ve tried solutions like adding a vertical scrollbar, which works, but it’s not meeting my requirements.
Update: Added a recreatable html and css

.dis{
    display: flex;
    height:auto;
}

.dlist {
    display: grid;
    row-gap: 5%;
    column-gap: 10%;
    grid-template-columns: 1fr 1fr 1fr;
}

.dgrid {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    gap: 5px;
}
  <!DOCTYPE html>

<html>
   <head>
      <link rel="stylesheet" href="a.css" />
   </head>
   <body>
      <div class="dis">
         <div class="dlist">
            <article class="dgrid">
               <h3>John elizabeth</h3>
            </article>
            <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
             <article class="dgrid">
                <h3>John elizabeth</h3>
             </article>
         </div>
      </div>
   </body>
</html>

Added a screenshot where the grid is overlapping the container. The problem is the container is not growing and I am unable to figure of why the grid is overflowing and not the outer container.
enter image description here

Tags:

2

Answers


  1. 0

    To make your grid responsive, you can use CSS media queries. These queries enable you to adjust the number of columns based on the screen size. As the screen width changes, the grid can adapt accordingly. Here’s an example:

    .list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 5% 10%;
}

    In this code, auto-fit allows the grid to automatically adjust the number of columns based on available space, and minmax(200px, 1fr) sets a minimum column width of 200px but allows columns to expand when there’s more space.
    3. Expanding the Flex Container:

    Flex containers typically expand to fit their content by default. However, if you’re facing overflow issues, consider setting a max-height on the flex container or using overflow: auto to add a vertical scrollbar when the content exceeds a certain height. This ensures that the content remains accessible without overlapping the footer.
    Here’s an updated version of your CSS with these adjustments:

    .App {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 100vh; /* Set a max height to prevent excessive growth */
    overflow: auto; /* Add a vertical scrollbar if needed */
}

.list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 5% 10%;
}

.footer {
    display: flex;
    justify-content: center;
}

    You can customize the minmax values and other styles to create your preferred layout and ensure responsiveness.

    HTML for running the demo:

    <div class="App">
  <div class="list">
    <article class="grid">
      Display1
    </article>
    
    <article class="grid">
      display2
    </article>
    
    <article class="grid">
      display3
    </article>
  </div>
  
  <div class="footer">
    footer
  </div>
</div>

    If my answer does not Help, go to this StackOverflow question if this also don’t help you see this tutorial very good explaining has been done here how to use flexbox in grid. If this also don’t suit you this is the same StackOverflow question that you asked somewhat same-.

    Login or Signup to reply.
  2. 0

    This is caused by the fact that you are using a gap percentage value. You will have to use other units:

    .dis {
  display: flex;
  background-color: blue;
}

.dlist {
  display: grid;
  gap: 10px;
  /* gap: 5% 10%; */
  grid-template-columns: repeat(3, 1fr);
}

.dgrid {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  gap: 5px;
  background-color: yellow;
}
    <div class="dis">
  <div class="dlist">
    <article class="dgrid">
      <h3>John elizabeth</h3>
    </article>
    <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
     <article class="dgrid">
       <h3>John elizabeth</h3>
     </article>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search