7

I have the code sample below. How can I make sure that with any given number of rows or cols the grid will expand the items as much as needed to fill its parent container?

The purpose is having a sort of calculator application with the gird items as buttons that should take as much space as possible but evenly.

The following is what I came with. As you can see, there is scrolling and also I'm not sure it's the right approach.

body {
  min-height: 100%;
}

.wrapper {
  display: grid;
  position: relative;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1px;
  justify-content: center;
  height: 100%;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 12px;
}

.container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
<section class="container">
  <div class="wrapper">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
    <div class="box f">F</div>
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
    <div class="box f">F</div>
  </div>
</section>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
TomerMiz
  • 377
  • 1
  • 3
  • 13

1 Answers1

1

grid-template-rows: repeat (2, 1fr) is not required. Rows are arranged automatically.

If your container has a fixed size, use px size instead of vh. You can also use the calc function.

* { box-sizing: border-box;
}
html,body {
   height: 100%;
   margin: 0;
}
.footer {
   height: 10vh;
   background-color: #eee;
   text-align: center;
}
.wrapper {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-gap: 1px;
   justify-content: center;
   height: 90vh;
}
.box {
   background-color: #444;
   color: #fff;
   padding: 10px;
   font-size: 12px;
}
    <section class="container">
      <div class="wrapper">
        <div class="box a">A</div><div class="box b">B</div><div class="box c">C</div><div class="box d">D</div>
        <div class="box e">E</div><div class="box f">F</div><div class="box a">A</div><div class="box b">B</div>
        <div class="box c">C</div><div class="box d">D</div><div class="box e">E</div><div class="box f">F</div>
      </div>
    </section>
<footer class="footer">
  footer
</footer>

If your container has a fixed size, use a px size

Or use Flex:

* { box-sizing: border-box;
}

html,body {
  height: 100%;
  margin: 0;
}
.footer {
  height: 10vh;
  background-color: #eee;
  text-align: center;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height:90vh;
}

.wrapper > div {
  width: 16.666%;
  text-align: center;
  font-size: 12px;
  line-height: 6;
  border: 1px solid;
  background-color: #444;
}
    <section class="container">
      <div class="wrapper">
        <div class="box a">A</div><div class="box b">B</div><div class="box c">C</div><div class="box d">D</div>
        <div class="box e">E</div><div class="box f">F</div><div class="box a">A</div><div class="box b">B</div>
        <div class="box c">C</div><div class="box d">D</div><div class="box e">E</div><div class="box f">F</div>
      </div>
    </section>
<footer class="footer">
  footer
</footer>

No footer:

* { box-sizing: border-box;}

html,body {
  height: 100%;
  margin: 0;
}
.container {
  position: relative;
  min-height:100%;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  height:100%;
  margin: 0 auto;
  max-height:100%;
  position:absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}
.wrapper > div {
  width: 16.666%;
  text-align: center;
  font-size: 12px;
  line-height: 6;
  border: 1px solid;
  background-color: #444;
}
<section class="container">
  <div class="wrapper">
    <div class="box a">A</div><div class="box b">B</div><div class="box c">C</div><div class="box d">D</div>
    <div class="box e">E</div><div class="box f">F</div><div class="box a">A</div><div class="box b">B</div>
    <div class="box c">C</div><div class="box d">D</div><div class="box e">E</div><div class="box f">F</div>
  </div>
</section>

example 4: footer and header

* { box-sizing: border-box; }

html,body {
  height: 100%;
  margin: 0;
}
.footer {
  height: 10vh;
  background-color: #eee;
  text-align: center;
  font-size: 4vh;
}
.header {
  height: 10vh;
  background-color: #eee;
  text-align: center;
  font-size: 4vh;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height:80vh;
}
.wrapper > div {
  width: 16.666%;
  text-align: center;
  border: 1px solid;
  background-color: #444;
}
<div class="header">header</div>

<section class="container">
      <div class="wrapper">
        <div class="box a">A</div><div class="box b">B</div><div class="box c">C</div><div class="box d">D</div>
        <div class="box e">E</div><div class="box f">F</div><div class="box a">A</div><div class="box b">B</div>
        <div class="box c">C</div><div class="box d">D</div><div class="box e">E</div><div class="box f">F</div>
      </div>
</section>
<footer class="footer">
  footer
</footer>

**example 5: **

* { box-sizing: border-box;}
html,body {  height: 100%;  margin: 0;}

.footer {
  height: 15vh;
  background-color: #eee;
  text-align: center;
}
.header {
  height: 15vh;
  background-color: #eee;
  text-align: center;
  
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height:70vh;
}
.wrapper > div {
  width: 16.666%;
  text-align: center;
  font-size: 12px;
  border: 1px solid;
  background-color: #444;
}
<div class="header">header</div>
<div class="wrap">
<section class="container">
  <div class="wrapper">
    <div class="box a">A</div><div class="box b">B</div><div class="box c">C</div><div class="box d">D</div>
    <div class="box e">E</div><div class="box f">F</div><div class="box a">A</div><div class="box b">B</div>
    <div class="box c">C</div><div class="box d">D</div><div class="box e">E</div><div class="box f">F</div>
  </div>
</section>
</div>
<div class="footer">
      footer
</div>
user206
  • 1,085
  • 1
  • 10
  • 15
  • thanks but how can i make the container itself to take 100% height? i dont want to add fixed height – TomerMiz May 19 '19 at 09:57
  • Add to **container class**: `position: absolute; left:0; right:0; top:0; bottom:0;` and **wrapper class**: position:relative; – user206 May 19 '19 at 10:27
  • its a progress thanks, but i dont neey absolute positioning, i need the grid to expand 100% width and height of the container without scrolling, see a sample here, but the footer is hidden and i still have the scrolling: https://jsfiddle.net/#&togetherjs=23vA2C9OSh – TomerMiz May 20 '19 at 13:30
  • Your link will not be opened. I apologize. Because of habit, I always put the container inside the wrap (the reverse is your code) ... and so I made a mistake. Absolute from outside ... Hope to help (I edit it) – user206 May 20 '19 at 22:51
  • thats great but how can i avoid the scolling? https://jsfiddle.net/odqyeu1x/ – TomerMiz May 26 '19 at 13:34
  • There is no scroll / edited / sizes can be changed. Do you mean scolling when the height decreases? It depends on the font and ... you have. And only at a height less than content .... , You can use `@media` to change the font and ...., or hide the footer ... – user206 May 26 '19 at 18:08
  • currently, the wrapper height is 90vh, the wrapper height should be 100% of its parent without creating scrollbars since i do not know the actual size of the grid its dynamic. – TomerMiz May 27 '19 at 05:06
  • Footer height is 10vh.If you do not want the footer, I'll put two other examples. – user206 May 27 '19 at 13:55
  • I think you have a footer and header. See the last example. – user206 May 27 '19 at 18:28
  • The scoll was related to header and footer. You must either set the font. Or by @media at low height, remove the header and .... Look at the fourth example – user206 May 27 '19 at 18:39
  • Or, consider more space for footer and header. Example 5 – user206 May 27 '19 at 18:45
  • **header** and **footer** and **boxes** have the least amount of content. You need to set something like `font size`, `line-height`, `margin` or `padding` and ... at a height less than their content. With `@media` or **Relative Lengths**. Or `display:none` – user206 May 27 '19 at 19:28