I am trying out a layout using CSS grid. Inside the header I have a div with a class called logo and I want it vertical aligned.
Here is the full code (View full-screen to see the issue):
html,
body {
height: 100%;
}
.container {
display: grid;
height: 100%;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "h h" "s m" "f f";
grid-gap: 10px;
}
.header {
grid-area: h;
background-color: red;
}
.header .logo {
display: inline-grid;
padding: 5px;
border: 1px solid #ccc;
align-content: center;
}
.sidebar {
grid-area: s;
background-color: grey;
}
.main {
grid-area: m;
background-color: purple;
}
.footer {
grid-area: f;
background-color: blue;
}
<div class="container">
<div class="header">
<div class="logo">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
I've tried: align-content: center and justify-self: center, but it's not moving from the top.
How can I vertical align class logo in the header using css grid?
Is this what you want to do
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
html,
body {
height: 100%;
}
.container {
display: grid;
height: 100%;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "h h" "s m" "f f";
grid-gap: 10px;
}
.header {
padding: 70px 0; /* this code */
grid-area: h;
background-color: red;
}
.header .logo {
display: inline-grid;
padding: 5px;
border: 1px solid #ccc;
}
.sidebar {
grid-area: s;
background-color: grey;
}
.main {
grid-area: m;
background-color: purple;
}
.footer {
grid-area: f;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Other Opsion
.header {
display: table;
overflow: hidden;
height: 500px;
grid-area: h;
background-color: red;
}
.header .logo {
display: table-cell;
vertical-align: middle;
padding: 5px;
border: 1px solid #ccc;
}
This is all you need:
.header .logo {
display: inline-grid;
padding: 5px;
border: 1px solid #ccc; //remove this
align-content: center;
height: 100%; //This will work for responsive screens as well.
}
Related
My question is similar to this one: I'm trying to contain an aspect-ratio element within its parent element. One difference though, this aspect-ratio element has siblings—a header and a footer—and all this nice family should be center-aligned and share a common width.
Images are worth a thousand words:
GIFs are worth a thousand images:
I'm close to that result, but I'm not quite there yet:
body {
height: 100%;
margin: 0;
}
html {
background-color: lightgrey;
height: 100%;
}
#footer,
#header {
background-color: blue;
height: 50px;
}
#paper {
aspect-ratio: 1;
background-color: red;
margin: auto;
max-height: 100%;
overflow: hidden;
width: 100%;
}
#wrapper {
align-content: center;
display: grid;
height: 100%;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
Any CSS wizard to help me out?
Not sure if you can get all the requirements but here is the best I could do (seems to work on chrome only)
body {
background-color: lightgrey;
margin: 0;
}
#footer,
#header {
background-color: blue;
height: 50px;
}
#paper {
aspect-ratio: 1;
background-color: red;
max-height: 100%;
max-width: 100vw;
}
#wrapper {
place-content: center;
display: grid;
height: 100vmin;
margin-block: max(0px,50vh - 50vmin);
grid-template-rows: auto minmax(0, 1fr) auto;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
If the 50px is known you can do like below:
body {
background-color: lightgrey;
margin: 0;
--h: 50px; /* the fixed height */
}
#footer,
#header {
background-color: blue;
height: var(--h);
}
#paper {
aspect-ratio: 1;
background-color: red;
width: min(100vw,100vh - 2*var(--h));
}
#wrapper {
place-content: center;
display: grid;
height: min(100vh, 100vw + 2*var(--h));
margin-block: max(0px, (100vh - 100vw - 2*var(--h))/2);
grid-template-rows: auto minmax(0, 1fr) auto;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
Try this solution, all the magic happens in grid-template-columns and grid-template-rows.
html {
background-color: lightgrey;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#wrapper {
--footer-header-height: 50px;
align-content: center;
display: grid;
height: 100vh;
grid-template-columns: 1fr minmax(auto, calc(100vh - var(--footer-header-height) * 2)) 1fr;
grid-template-rows: auto minmax(auto, 100vw) auto;
}
#footer,
#header {
grid-column: 2;
background-color: blue;
height: var(--footer-header-height);
}
#paper {
grid-column: 2;
aspect-ratio: 1 / 1;
background-color: red;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
Actually Container Queries enable us to solve this kind of problems elegantly.
Support for this feature is currently very bad (see here), but it's part of Interop 2022 so I guess it'll look different by the end of the year.
I post this as an answer as it might help someone in the future 👽👋
Note that you currently need to turn on a flag on Chrome to be able to test it.
body {
container-type: size;
height: 100%;
margin: 0;
}
html {
background-color: lightgrey;
height: 100%;
}
#footer,
#header {
background-color: blue;
}
#paper {
background-color: red;
}
#wrapper {
align-content: center;
display: grid;
grid-template-columns: min(100cqi, (100cqb - 100px));
grid-template-rows: 50px min(100cqb - 100px, 100cqi) 50px;
justify-content: center;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
Here's the same code but relying on viewport units (works in all browsers):
body {
height: 100%;
margin: 0;
}
html {
background-color: lightgrey;
height: 100%;
}
#footer,
#header {
background-color: blue;
}
#paper {
background-color: red;
}
#wrapper {
align-content: center;
display: grid;
grid-template-columns: min(100vw, (100vh - 100px));
grid-template-rows: 50px min(100vh - 100px, 100vw) 50px;
height: 100%;
justify-content: center;
}
<div id="wrapper">
<div id="header"></div>
<div id="paper"></div>
<div id="footer"></div>
</div>
I have a simple web page with a header, a content section and a footer. My content section has uses css grid. I want the content to take up all of the space between the header and the footer with the header and footer always visible on the page. I find that with no images, this works. I can resize the screen and the footer is always visible.
However, after adding tags within the grid divs, the footer is pushed off the page.
Here is a JS Fiddle with no images:
https://jsfiddle.net/7p3mbquk/
Here is a JS fiddle with images
https://jsfiddle.net/Lrm8gbue/4/
Notice how when you reduce the width of the screen, the footer gets pushed down below the window.
Brett Donald offered a solution below that works in chrome.
Why does it not work the same in Safari v14.1.2?
In this image, I have the site running in safari on the left hand side and Chrome v96.0 in the right hand side.
Here is my CSS...
body {
margin: 0;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
height: 99vh;
}
.header {
flex-basis: 10px;
grid-area: header;
display: flex;
justify-content: space-between;
width: 100%;
color: white;
background-color: black;
padding: 0 1rem;
height: 100%;
}
.footer {
flex-basis: 10px;
grid-area: footer;
display: flex;
justify-content: flex-start;
width: 100%;
color: white;
background-color: black;
padding: 0 1rem;
height: 100%;
}
.content {
flex-basis: 1 0 1fr;
height: 100%;
align-self: top;
grid-area: content;
display: flex;
flex-direction: column;
align-items: center;
background-color: red;
}
.content .description {
text-align: center;
font-size: clamp(1rem, 3vw, 2rem);
font-family: verdana;
/* text-shadow: 2px 2px white; */
padding: 1rem;
}
.oval {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
background-color: #ccc;
border: 5px solid black;
border-radius: 100px / 100px;
box-shadow: 2px 2px white;
margin: 1rem 1rem;
}
.content > .photos {
flex-grow: 4;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fill, 1fr);
align-content: center;
align-content: stretch;
}
#media (min-width: 700px) {
.content > .photos {
grid-template-columns: repeat(3, 1fr);
}
}
#media (min-width: 800px) {
.content > .photos {
grid-template-columns: repeat(4, 1fr);
}
}
.content > .photos > div {
background-color: yellow;
border: 1px solid black;
justify-content: center;
}
.content > .photos img {
width: 100%;
max-height: 100%;
object-fit: cover;
}
Here is my markdown
<head>
<link rel="stylesheet" href="./main.css" />
<script type="module" src="./main.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<p class="coname">Momo's Surf School</p>
<p class="contact">Contact</p>
</div>
<div class="content">
<div class="oval">
<div class="description">
Make your holiday amazing with a fun, relaxing day learning to surf
with Mo!
</div>
</div>
<div class="photos">
<div><img src="./assets/woman.jpg" /></div>
<div><img src="./assets/women.jpg" /></div>
<div><img src="./assets/man.jpg" /></div>
<div><img src="./assets/woman3.jpg" /></div>
<div><img src="./assets/woman2.jpg" /></div>
<div><img src="./assets/waves.jpg" /></div>
<div><img src="./assets/twoBoys.jpg" /></div>
<div><img src="./assets/barrel.jpg" /></div>
</div>
</div>
<div class="footer"><p>Established 2013</p></div>
</div>
</body>
Your content div needs an overflow-y: scroll; rule. And I got rid of your flex-basis rules.
Is this the effect you are after?
body {
margin: 0;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
grid-area: header;
display: flex;
justify-content: space-between;
width: 100%;
color: white;
background-color: black;
padding: 0 1rem;
}
.footer {
grid-area: footer;
display: flex;
justify-content: flex-start;
width: 100%;
color: white;
background-color: black;
padding: 0 1rem;
}
.content {
align-self: top;
grid-area: content;
display: flex;
flex-direction: column;
align-items: center;
background-color: red;
overflow-y: scroll;
}
.content .description {
text-align: center;
font-size: clamp(1rem, 3vw, 2rem);
font-family: verdana;
/* text-shadow: 2px 2px white; */
padding: 1rem;
}
.oval {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
background-color: #ccc;
border: 5px solid black;
border-radius: 100px / 100px;
box-shadow: 2px 2px white;
margin: 1rem 1rem;
}
.content > .photos {
flex-grow: 4;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fill, 1fr);
align-content: center;
align-content: stretch;
}
#media (min-width: 700px) {
.content > .photos {
grid-template-columns: repeat(3, 1fr);
}
}
#media (min-width: 800px) {
.content > .photos {
grid-template-columns: repeat(4, 1fr);
}
}
.content > .photos > div {
background-color: yellow;
border: 1px solid black;
justify-content: center;
line-height: 0;
}
.content > .photos img {
width: 100%;
max-height: 100%;
object-fit: cover;
}
<body>
<div class="container">
<div class="header">
<p class="coname">Momo's Surf School</p>
<p class="contact">Contact</p>
</div>
<div class="content">
<div class="oval">
<div class="description">
Make your holiday amazing with a fun, relaxing day learning to surf
with Mo!
</div>
</div>
<div class="photos">
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
</div>
</div>
<div class="footer"><p>Established 2013</p></div>
</div>
</body>
Is it possible to prevent the overflow of a child in a css grid container set to height: 80% ?
When a css grid row is set to 1fr, it is easily overflown by its children.
My main goal is to limit the height of .bottom & .side,
and have the ul element fill the .side element, while having overflow-y: scroll
.side should always be full height of .bottom.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
height: 80%;
max-height: 300px;
width: 500px;
margin: 0 auto;
border: 1px solid #000;
display: grid;
grid-template-rows: 72px 1fr;
}
.top {
background-color: cyan;
}
.bottom {
background-color: #e9eaf4;
display: grid;
grid-template-columns: 224px 1fr;
grid-column-gap: 24px;
}
.bottom .side,
.bottom .main {
background-color: #fff;
}
ul {
list-style: none;
border: 1px dashed red;
}
ul span {
padding: 10px;
font-size: 20px;
}
<div class="container">
<div class="top">top</div>
<div class="bottom">
<div class="side">side
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
</ul>
</div>
<div class="main">main</div>
</div>
</div>
Adjust the code like below (check the comments). Related question to understand the min-height trick Prevent content from expanding grid items
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
height: 80%;
max-height: 300px;
width: 500px;
margin: 0 auto;
border: 1px solid #000;
display: grid;
grid-template-rows: 72px 1fr;
}
.top {
background-color: cyan;
}
.bottom {
background-color: #e9eaf4;
display: grid;
grid-template-columns: 224px 1fr;
grid-column-gap: 24px;
min-height:0; /* added */
}
.bottom .side,
.bottom .main {
background-color: #fff;
display:flex; /* added */
flex-direction:column; /* added */
min-height: 0; /* added */
}
ul {
list-style: none;
border: 1px dashed red;
overflow:auto; /* added */
}
ul span {
padding: 10px;
font-size: 20px;
}
<div class="container">
<div class="top">top</div>
<div class="bottom">
<div class="side">side
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
</ul>
</div>
<div class="main">main</div>
</div>
</div>
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 4 years ago.
i'm trying to get to the layout from middle to left as shown in the picture.
How can i make the grey div to push itself up using flex? Should i just use fixed position for it? Thought about changing the html to create container div for the orange and grey boxes, but I want to see how to do it without changing the html.
#import 'general.css';
#import 'reg.css';
#import "768.css" screen and (min-width : 992px);
#import "992.css" screen and (min-width : 1200px);
/*general*/
body, html{
margin: 0;
padding:0;
height: 100%;
}
* {
box-sizing: border-box;
}
/*reg*/
.container{
background-color: red;
text-align: center;
display: flex;
height: 100%;
flex-wrap: wrap;
}
.box{
height: 10%;
width: 100%;
}
header{
background-color: black;
color: white;
width: 100%;
order:1;
}
footer{
background-color: navy;
color: white;
width: 100%;
order:5;
}
.main-content{
background-color: dodgerblue;
height: 60%;
width: 100%;
order:2;
}
.grey{
background-color: grey;
order:4;
}
.orange{
background-color: orangered;
order:3;
}
/*768*/
.box{
height: 11%;
}
.main-content{
height: 67%;
}
.grey{
width: 30%;
order:3;
}
.orange{
background-color: orangered;
width: 70%;
order:4;
}
/*992*/
.main-content{
width: 85%;
order:3;
align-self: flex-end;
height: 80%;
}
.grey{
width: 15%;
order:4;
align-self: flex-start;
height:20% ;
}
.orange{
width:15%;
order:2;
align-self: flex-start;
height: 60%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/index.css">
<title>Document</title>
</head>
<body>
<div class="container">
<header class="box">this is the header</header>
<div class="main-content box">this is main content</div>
<div class="orange box">this is the orange</div>
<div class="grey box">this is the grey</div>
<footer class="box">this is the footer</footer>
</div>
</body>
</html>
I don’t see any solution only using flex because boxes will flow in lines. So as you mentioned, using a positioning for the grey box would be the only way to achieve this.
This is a solution using grid though:
body, html {
height: 100%;
padding:0;
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
display: grid;
grid-template-areas:
"a"
"b"
"c"
"d"
"e";
grid-template-rows: 1fr 60% 1fr 1fr 1fr;
height: 100%;
background-color: red;
}
.box {
display: flex;
justify-content: center;
align-items: center;
}
header {
grid-area: a;
color: white;
background-color: black;
}
.main-content {
grid-area: b;
background-color: dodgerblue;
}
.orange {
grid-area: c;
order: 4;
background-color: orangered;
}
.grey {
grid-area: d;
background-color: grey;
}
footer {
grid-area: e;
color: white;
background-color: navy;
}
#media ( min-width: 768px ) {
.container {
grid-template-areas:
"a a"
"b b"
"d c"
"e e";
grid-template-rows: 15% 4fr 1fr 15%;
grid-template-columns: 15% 1fr;
}
#media ( min-width: 992px ) {
.container {
grid-template-areas:
"a a"
"c b"
"d b"
"e e";
grid-template-rows: 15% 4fr 1fr 15%;
grid-template-columns: 15% 1fr;
}
}
<div class="container">
<header class="box">this is the header</header>
<div class="box main-content">this is main content</div>
<div class="box orange">this is the orange</div>
<div class="box grey">this is the grey</div>
<footer class="box">this is the footer</footer>
</div>
You can use the order style of flex children to affect what order they are rendered inside of a flex parent, however this does require some wrapping divs so you'd have to change your HTML slightly, otherwise you must use CSS grid. Snippet with working example of your images below:
:root {
--min-height: 80px;
}
* {
border-sizing: border-box;
padding: 0;
margin: 0;
}
html, body, .container {
height: 100%;
}
body {
padding: 10px;
}
div {
border-radius: 10px;
}
.container {
display: flex;
flex-direction: column;
}
.container > div {
margin-bottom: 10px;
}
.container > div:last-child {
margin: 0;
}
.main-content > div {
margin-bottom: 10px;
}
.main-content > div:last-child {
margin: 0;
}
.side-content > div {
margin-bottom: 10px;
}
.side-content > div:last-child {
margin: 0;
}
.header, .footer, .content {
min-height: var(--min-height);
}
.teal.content {
min-height: calc(5 * var(--min-height));
}
.black {
background: rgb(30, 32, 42);
}
.teal {
background: rgb(74, 161, 162);
}
.orange {
background: rgb(253, 170, 82);
}
.gray {
background: rgb(203, 187, 172);
}
.navy {
background: rgb(61, 94, 109);
}
#media screen and (min-width: 768px) {
.side-content {
display: flex;
flex-direction: row;
}
.side-content > div {
margin: 0;
}
.side-content > div:last-child {
margin-right: 10px;
}
.orange {
flex: 2 0 auto;
order: 1;
}
.gray {
flex: 1 0 auto;
order: 0;
}
}
#media screen and (min-width: 992px) {
.main-content {
display: flex;
flex-direction: row;
}
.main-content > div {
margin: 0;
}
.main-content > div:last-child {
margin-right: 10px;
}
.side-content {
order: 0;
flex: 1 0 auto;
flex-direction: column;
margin-right: 10px;
}
.side-content > div:last-child {
margin: 0;
}
.side-content > div:first-child {
margin-bottom: 10px;
}
.orange {
order: 0;
margin-bottom: 10px;
}
.teal {
order: 1;
flex: 7 0 auto;
}
}
<div class="container">
<div class="black header"></div>
<div class="main-content">
<div class="teal content"></div>
<div class="side-content">
<div class="orange content"></div>
<div class="gray content"></div>
</div>
</div>
<div class="navy footer"></div>
</div>
I have this setup of photos and thumbnails made with regular CSS, and I was wondering: can it be simplified using flexbox?
http://jsfiddle.net/frank_o/n9pM2/10/
HTML:
<div class="one">
<h1>Can this:</h1>
<div class="wrapper">
<div class="photos">
<img src="http://placekitten.com/200/400" />
</div>
<div class="thumbnails">
<img src="http://placekitten.com/70/70" />
<img src="http://placekitten.com/70/70" />
</div>
</div>
</div>
CSS:
.one .photos {
border: 2px solid lightgrey;
float: left;
width: calc(100% - 80px);
}
.one .photos img {
width: 100%;
}
.one .thumbnails {
width: 70px;
float: right;
border: 2px solid red;
}
.one .thumbnails img {
display: block;
margin-bottom: 5px;
}
https://codepen.io/polinq/pen/gObLoZx
Please have a look here. Is that what you were looking for?
Happy to provide clarification if something is not clear?
.one .wrapper {
display: flex;
}
.one .thumbnails {
display: flex;
flex-direction: column;
border: 2px solid red;
align-self: flex-start;
margin-left: 5px;
}
.two .wrapper {
display: flex;
flex-direction: column;
}
.two .thumbnails {
display: flex;
flex-direction: row;
border: 2px solid red;
margin-left: 5px;
}
You can simplify it a lot with grid:
.grid {
display: grid;
grid-template-columns: 9fr 1fr;
grid-gap: 14px
}
img {
width: 100%;
border: solid 5px lightgray;
}
.thumbs img{
border: solid 2px #f00
}
<h1>Can this:</h1>
<div class="grid">
<img src="http://placekitten.com/200/400" />
<div class="thumbs">
<img src="http://placekitten.com/70/70" />
<img src="http://placekitten.com/70/70" />
</div>
</div>