This is a menu I made using html and css.
As you can see we have 3 boxes. I want all of the boxes to have the same height. I can’t use Flexbox cause the following rule must be applied.
I used 12 grid framework to make the webpage responsive for desktops, tablets, and mobile. The 3 boxes are each specified to take 33.33% of the width when the width of the screen is more than 992px. If the screen width is between 991px and 768px the first two boxes must take 50% of the width and the third box take the whole width of the screen. And if the screen width is less than 767px each box must take 100% of the width.
/* Base style */
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
font-family: fantasy, sans-serif;
}
h1 {
text-align: center;
margin-bottom: 15px;
margin-top: 40px;
}
.container {
position: relative;
margin: 15px;
}
.row {
width: 100%;
}
section > div {
position: relative;
top: 0px;
border: 2px solid black;
background-color: rgb(250, 255, 190);
margin: 15px;
padding: 10px;
}
div > p {
text-align: justify;
margin-top: 50px;
font-size: 100%;
}
label {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
text-align: center;
border-left: 2px solid black;
border-bottom: 2px solid black;
}
h3 {
margin: 15px 0px 15px 0px;
}
#title-1 {
background-color: #9f7b59;
color: #fff0dc;
}
#title-2 {
background-color: #a76e69;
}
#title-3 {
background-color: #0c1b44;
color: #8e8c6a;
}
/* Desktop */
@media (min-width: 992px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
float: left;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
/* Mobile */
@media (max-width: 767px) {
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
float: left;
}
.col-sm-1 {
width: 8.33%;
}
.col-sm-2 {
width: 16.66%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33%;
}
.col-sm-5 {
width: 41.66%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33%;
}
.col-sm-8 {
width: 66.66%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33%;
}
.col-sm-11 {
width: 91.66%;
}
.col-sm-12 {
width: 100%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<title>Coursera Module 2 Assignment</title>
</head>
<body>
<header>
<h1>Menu!</h1>
</header>
<main>
<div class="container">
<div class="row">
<section class="col-lg-4 col-md-6 col-sm-12">
<div>
<label id="title-1"><h3>Chicken</h3></label>
<p>
Chicken is the most common type of poultry in the world. Owing
to the relative ease and low cost of raising chickens in
comparison to mammals such as cattle or hogs chicken meat and
chicken eggs have become prevalent in numerous cuisines.
</p>
</div>
</section>
<section class="col-lg-4 col-md-6 col-sm-12">
<div>
<label id="title-2"><h3>Beef</h3></label>
<p>
Beef is the culinary name for meat from cattle. In prehistoric
times, humankind hunted aurochs and later domesticated them.
Since that time, numerous breeds of cattle have been bred
specifically for the quality or quantity of their meat.
</p>
</div>
</section>
<section class="col-lg-4 col-md-12 col-sm-12">
<div>
<label id="title-3"><h3>Sushi</h3></label>
<p>
Sushi is a Japanese dish of prepared vinegared rice, usually
with some sugar and salt, accompanied by a variety of
ingredients, such as seafood often raw and vegetables. Styles of
sushi and its presentation vary widely, but the one key
ingredient is "sushi rice", also referred to as shari, or
sumeshi.
</p>
</div>
</section>
</div>
</div>
</main>
</body>
</html>I tried using Flexbox, but that makes all boxes show in the same row/column, and the rule defined for responsive web won’t apply anymore.
2
Answers
The flex layout can’t achieve the same height of multiple lines, so I readjusted it with the grid layout. Thank you @tacoshy for reminding me. I hope this answer can help you.
Use CSS-Grid for that.
If you use
grid-auto-rows: 1frthen all rows will have the same height (the height of the tallest row). The number of columns you can define withgrid-template-columnswhich will equally divide the space: