CSS grid is not reponsive after some point

user_6848112 0
Viewed 83

I am working on very project where I need to use sidebar layout(using grid) and then in content area i have to make vertical form/inputs(using flex-flow: column wrap; height: some fix height in Pixels).

I used css grid to make basic sidebar layout for desktop and tablet(it's working fine), but the problem starts when i try to shrink my width below 768px, my inputs are not adjusting even if I already set width of 100%.

and I want all my columns(for this case 4 columns) to be fluid(responsive) as much as it can be. like may be till 300px or 400px.

you can see code here: codepen.io/blackbeardo/pen/BaxBLGK

also I am posting code here for someone to quick look if they find something:

    <div class="container-fluid test">
      <div class="grid-wrapper">
        <header class="box header">Header</header>
        <aside class="box aside">
          <div class="sidebar-1 box-1">side-1</div>
          <div class="sidebar-2 box-1">side-2</div>
        </aside>
        <main class="box content">
          <div class="content-holder">
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
            <div class="input-group">
              <label for="first_name">First Name</label>
              <input type="text" name="first_name" placeholder="First name" />
            </div>
          </div>
        </main>
      </div>
    </div>
    <script src="./js/main.js"></script>
  </body> 


**and scss:**


.box {
  background-color: #444;
  color           : #fff;
  border-radius   : 5px;
  padding         : 10px;
  font-size       : 1rem;
}

.box-1 {
  background-color: red;
  color           : #fff;
  border-radius   : 5px;
  padding         : 10px;
  font-size       : 1rem;
}

.container-fluid {
    position: relative;
    width: 100%;
}

header {
  grid-area: header;
}

aside {
  grid-area: aside;
}

main {
  grid-area: main;
}

.grid-wrapper {
  background-color: #fff;
  color           : #444;
}

.grid-wrapper {
  display              : grid;
  grid-template-columns: min(20%, 265px) auto;
  grid-gap             : 1rem;
  grid-template-areas  :
    "header header"
    "aside main";
}

/* tablet mode*/
@media (max-width:1024px) {
  .grid-wrapper {
    grid-template-columns: auto;
    grid-template-areas  :
      "header"
      "aside"
      "main";
  }

  .content-holder {

    .input-group {

      input {
        //flex-shrink: 1;
        width      : 100%;
      }
    }
  }

}

.aside {
  display       : flex;
  gap           : 1rem;
  flex-direction: column;
  flex-wrap     : wrap;
}

.content {
  width: 100%;

  .content-holder {
    height        : 250px;
    display       : flex;
    gap           : 1rem;
    flex-direction: column;
    flex-wrap     : wrap;

    .input-group {
      display  : flex;
      flex-flow: column wrap;

      input {
        width: 100%;
      }
    }
  }
}```
responsive-design css-grid fluid-layout css html
1 Answers

The problem is you're asking your inputs to wrap in a fixed-height container (height: 250px). If you want the inputs to remain at 4 columns for as long as possible, you could instead set that to a min-height: 250px and give the .input-group the ability to adjust itself via the flex property (grow, shrink, and 20% to factor in the gap you have). I also made the holder a row instead of a column so I could get the flex columns to function. That seems to work much better and you can get down to 300px before things get weird.

https://codepen.io/andrew-stombaugh/pen/QWrLMPv

<div class="container-fluid">
  <div class="grid-wrapper">
    <header class="box header">Header</header>
    <aside class="box aside">
      <div class="sidebar-1 box-1">side-1</div>
      <div class="sidebar-2 box-1">side-2</div>
    </aside>
    <main class="box content">
      <div class="content-holder">
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
        <div class="input-group">
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" placeholder="First name" />
        </div>
      </div>
    </main>
  </div>
</div>

* {
  box-sizing: border-box;
}
.box {
  background-color: #444;
  color           : #fff;
  border-radius   : 5px;
  padding         : 10px;
  font-size       : 1rem;
}

.box-1 {
  background-color: red;
  color           : #fff;
  border-radius   : 5px;
  padding         : 10px;
  font-size       : 1rem;
}

.container-fluid {
    position: relative;
    width: 100%;
}

header {
  grid-area: header;
}

aside {
  grid-area: aside;
}

main {
  grid-area: main;
}

.grid-wrapper {
  background-color: #fff;
  color           : #444;
  
  display              : grid;
  grid-template-columns: min(20%, 265px) auto;
  grid-gap             : 1rem;
  grid-template-areas  :
    "header header"
    "aside main";
}

.aside {
  display       : flex;
  gap           : 1rem;
  flex-direction: column;
  flex-wrap     : wrap;
}

.content {
  width: 100%;

  .content-holder {
    min-height    : 250px;
    display       : flex;
    gap           : 1rem;
    flex-direction: row;
    flex-wrap     : wrap;

    .input-group {
      display  : flex;
      flex-flow: column wrap;
      flex: 1 1 20%;

      input {
        width: 100%;
      }
    }
  }
}

/* tablet mode*/
@media (max-width:1024px) {
  .grid-wrapper {
    grid-template-columns: auto;
    grid-template-areas  :
      "header"
      "aside"
      "main";
  }
  
  .aside {
  flex-direction: row;
    & > * {
      flex: 1;
    }
}

  .content-holder {

    .input-group {

      input {
        width      : 100%;
      }
    }
  }
}
user_85650100
Related