I'm trying to create a responsive layout using CSS grid that splits the screen into two columns: left column taking up 2/3 and right column taking up 1/3 of the screen.
My objective is to embed a YouTube video into the left column that scales up/down using up all the available space -- except padding -- in the left column. When viewed on a smaller screen, the columns should stack up on top of each other.
Similarly, I place an image and some text in the right column which take up 1/3 of the screen. I'm also trying to get the image to scale up and down as needed.
I created a public repo showing my code. I got the grid working but haven't been able to get the video or image to take up all the available space and scale down as needed on a smaller screen. Here's a link to the repo:
I'd appreciate some pointers on what I'm missing here. Thanks!
I'm trying to create a responsive layout using CSS grid that splits the screen into two columns: left column taking up 2/3 and right column taking up 1/3 of the screen.
My objective is to embed a YouTube video into the left column that scales up/down using up all the available space -- except padding -- in the left column. When viewed on a smaller screen, the columns should stack up on top of each other.
Similarly, I place an image and some text in the right column which take up 1/3 of the screen. I'm also trying to get the image to scale up and down as needed.
I created a public repo showing my code. I got the grid working but haven't been able to get the video or image to take up all the available space and scale down as needed on a smaller screen. Here's a link to the repo: https://github/imsam67/css-grid-video
I'd appreciate some pointers on what I'm missing here. Thanks!
Share Improve this question edited Mar 11 at 2:36 Sam asked Mar 11 at 2:21 SamSam 30.6k76 gold badges252 silver badges466 bronze badges 01 Answer
Reset to default 1Your .videos-section should not be a grid — remove display: grid;
To make the iframe responsive, remove the widthheight
.videos-section > iframe {
width: 100%;
aspect-ratio: 16/9;
}
Make .message-section a vertical flexbox rather than a grid, make the image a direct child of the flexbox, and remove align-items: centeralign-items value is stretch, which will cause the image to scale to fill the available width.
.message-section {
display: flex;
flex-direction: column;
}
.avatar {
display: flex;
background-color: #333;
width: 40px;
height: 40px;
border-width: 2px;
border-color: #333;
border-style: solid;
border-radius: 50%;
overflow: hidden;
justify-content: center;
margin-right: 4rem;
img-width: 100%;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica", sans-serif;
font-size: 1rem;
font-weight: 300;
letter-spacing: 0.1rem;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
border-width: 0;
border-radius: 0.4rem;
background-color: #421C27;
min-width: 10rem;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 1rem;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #FFF;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #1E201E;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.my-container {
background-color: #31322B;
color: #FFF;
min-block-size: 100vh;
min-block-size: 100dvh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 4rem 1fr auto;
grid-template-areas: "header" "main" "footer";
}
.my-header {
display: grid;
grid-area: header;
top: 0;
position: sticky;
background-color: #171111;
opacity: 0.9;
color: #FFF;
padding: 0;
align-items: center;
grid-template-columns: 1fr 1fr;
grid-template-areas: "header-left header-right";
}
.user-info {
grid: header-right;
display: grid;
justify-content: end;
}
.my-footer {
display: flex;
grid-area: footer;
background-color: #1E201E;
opacity: 0.75;
color: #FFF;
padding: 1.25rem;
font-size: 0.6rem;
justify-content: end;
}
.main-section {
grid-area: main;
padding: 1.25rem;
}
.grid-two-thirds {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 1.5rem;
grid-template-areas: "col-two-thirds-left col-one-third-right";
transition: grid-template-columns 0.3s ease;
margin: auto;
}
@media (max-width: 768px) {
.grid-two-thirds {
grid-template-columns: 1fr;
grid-template-areas: "col-two-thirds-left" "col-one-third-right";
}
}
.videos-section {
grid-area: col-two-thirds-left;
width: 100%;
justify-content: center;
}
.videos-section > iframe {
border: 1px solid #808080;
width: 100%;
aspect-ratio: 16/9;
}
.message-section {
grid-area: col-one-third-right;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}<div id="app" class="my-container">
<header class="my-header">
<div class="hamburger-menu">
</div>
<div class="user-info">
<div class="dropdown">
<div class="avatar">
<img src="https://picsum.photos/100" alt="Mr. Avatar" />
</div>
<div class="dropdown-content">
<a href="#">Profile</a>
<a href="#">Settings</a>
<a href="#">Logout</a>
</div>
</div>
</div>
</header>
<main class="main-section">
<div class="grid-two-thirds">
<div class="videos-section">
<!-- YouTube Video IFrame -->
<iframe src="https://www.youtube/embed/u31qwQUeGuM"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>
<div class="message-section">
<img src="https://picsum.photos/500" alt="Acme Logo" />
<div>
<h1>Lorem Ipsum!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
ultricies, nunc et posuere ultricies, nunc et posuere.
</p>
</div>
</div>
</div>
</main>
<footer class="my-footer">
<span>© 2025 Acme, Inc.</span>
</footer>
</div>