Flexbox layout for 5 boxes with big box in the midde
Clash Royale CLAN TAG#URR8PPPFlexbox layout for 5 boxes with big box in the midde
. I need to create a section wherein the pink box is between a white and blue section. So I decided that maybe flex is the best way to do this (correct me otherwise). When seen in mobile I'm expecting the whole pink box width will be 100% and the left and right (white /blue) section will be hidden.
somehow related to codepen.io/Paulie-D/pen/LNQMML but I need the bigger box in the middle. and the left and right boxes hides on mobile.
Paulie_D will be upset seeing his pen :p ... so basically you got a ready code and you want us to change it for you?.
– Temani Afif
2 hours ago
I tried working on the codepen link as I mention but to no avail. Just new in flex just heard 2 days ago. :)
– Kruze
2 hours ago
you can start by bringing the code to the site and create a snippet here ;) ... by the way, if you heard about it 2 days ago I think you still have a lot to read andto understand, so better take more time on this.
– Temani Afif
2 hours ago
1 Answer
1
Appealing to your statement: So I decided that maybe flex is the best way to do this (correct me otherwise)
That is really easy to do with modern CSS3 and HTML5 semantic tags.
body{
margin: 0;
padding: 0;
}
section{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
div:nth-child(2){
grid-row: span 2;
}
.colorp{background-color: #fd79a8;}
.colorw{background-color: white;
}
.colorb{background-color: #0984e3
}
@media only screen and (max-width: 600px){
section{
display: grid;
grid-template-columns: 1fr;
}
div:nth-child(2){grid-row: span 2;}
.colorb{display: none;}
.colorw{display: none;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<main class=" color">
<section>
<div id="element1" class=" colorw"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="element2" class=" colorp"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="element3" class=" colorw"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="element4" class=" colorb"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="element5" class=" colorb"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</section>
</main>
</body>
</html>
You can see how it works in this pen GO TO CODEPEN
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
So have you tried anything so far? Please attempt something, then update your question to show a specific problem you're having in a minimal, complete, and verifiable example.
– Obsidian Age
2 hours ago