0

I have this code in bootstrap:

https://jsfiddle.net/s18okje4/

<div class="row no-gutters">
  <div class="col-12">
  </div>
  <div class="col-12">
  </div>
</div>


.row {
  background: #f8f9fa;
  display:flex;
  height:100%;

}

.col-12 {
  border: solid 1px #6c757d;
  height: 100%;
}

I want the height of each .col-12 to cover all the space that it can occupy divided by the number of .col-12 that exist under the same parent (something similar to how flexbox works).

In my example I have a .row that I want to occupy 100% of the screen (this is the parent element) and its children in this case exist 2 .col-12 I want them to occupy the same height as it exists.

I know that this could be solved by putting 50% and 50% of height to each div, but I am looking for a dynamic and responsive solution, in this example I have 2 elements but they can be n and I would like to know the best way to do it and not have to modify my css code in every change. Thank you very much

this is my desired effect:

enter image description here

kewlashu
  • 1,099
  • 10
  • 18
yavg
  • 2,761
  • 7
  • 45
  • 115

2 Answers2

2

I think this is what you are going for. Here are 2 approaches: 1 using display: flex and the other using display: grid. Also, as a word of advice, I wouldn't suggest using bootstrap...it's better to just code your own layouts from scratch. Otherwise you get locked into their existing classes and end up just overwriting a load of their code.

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

html,body{
  height: 100%;
}

.row {
  background: #f8f9fa;
  height: 100%;
  width: 100%;
  padding: 5px;
}

.col-12 {
  border: solid 1px red;
  width: 100%;
}

/*Approach 1*/

.row{
  display:flex;
  flex-direction: column;
}

.col-12{
  flex-grow: 1;
}

/*Approach 2*/

.row{
  display: grid;
  grid-auto-rows: 1fr;
}
<div class="row no-gutters">
    <div class="col-12">
    </div>
    <div class="col-12">
    </div>
    <div class="col-12">
    </div>
    <div class="col-12">
    </div>
    <div class="col-12">
    </div>
    <div class="col-12">
    </div>
  </div>
CssProblem
  • 245
  • 3
  • 8
0

I think Grid layout is the best solution for this one.

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">

    <style>
        .row{
            display: grid;
            grid-template-columns: auto;
            border: 2px solid #a53b5d;
        }
        .col{
            border: 1px solid #ff598f;
            width: 100%;
            height:20vh;
        }
    </style>
</head>

<body>

<div class="row">
    <div class="col">
    </div>
    <div class="col">
    </div>
    <div class="col">
    </div>
    <div class="col">
    </div>
</div>

</body>
</html>
Daham Akalanka
  • 295
  • 1
  • 10