Hello again HTML & CSS course! https://www.youtube.com/watch?v=G3e-cpL7ofc
And in todays lesson I learned about CSS grid. Basically a flexible way to align difs in a grid, more convenient than just using raw block / inline-block elements.
My Code
This code on the top shows how the whole CSS grid thing works, and then below continues with the YouTube demo site implementation
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Long+Cang&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <style> p { font-family: Roboto, Arial; margin: 0; } .thumbnail { width: 100%; } .search-bar { font-size: 20px; margin: 12px 0px; display: block; } .video-title { margin-top: 0; font-size: 14px; font-weight: 500; line-height: 20px; margin-bottom: 12px; } .video-info-grid { display: grid; grid-template-columns: 50px 1fr; } .profile-picture { width: 40px; border-radius: 50px; } .thumbnail-row { margin-bottom: 12px; } .video-author, .video-stats { font-size: 12px; color: rgb(96, 96, 96); } .video-author { margin-bottom: 4px; } .video-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 15px; row-gap: 40px; } </style> </head> <body> <div style=" display: grid; grid-template-columns: 100px 100px; "> <div style="background-color: lightblue;">div 1</div> <div style="background-color: lightpink;"> div 2 <p>text</p> </div> </div> <div style=" margin-top: 30px; display: grid; grid-template-columns: 100px 1fr 1fr; "> <div style="background-color: lightblue;">div 1</div> <div style="background-color: lightpink;">div 2</div> <div style="background-color: lightblue;">div 3</div> </div> <div style=" margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 20px; row-gap: 40px; "> <div style="background-color: lightblue; height: 200px;">1fr</div> <div style="background-color: lightpink; height: 200px;">1fr</div> <div style="background-color: lightblue; height: 200px;">1fr</div> <div style="background-color: lightpink; height: 200px;">1fr</div> <div style="background-color: lightblue; height: 200px;">1fr</div> <div style="background-color: lightpink; height: 200px;">1fr</div> </div> <input class="search-bar" type="text" placeholder="Search"> <div class="video-grid"> <div class="video-preview"> <div class="thumbnail-row"> <img class="thumbnail" src="thumbnails/thumbnail-1.webp" alt=""> </div> <div class="video-info-grid"> <div class="channel-picture"> <img class="profile-picture" src="channel-pictures/channel-1.jpeg"> </div> <div class="video-info"> <p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p> <p class="video-author">Marques Brownlee</p> <p class="video-stats">3.4M views · 6 months ago</p> </div> </div> </div> <div class="video-preview"> <div class="thumbnail-row"> <img class="thumbnail" src="thumbnails/thumbnail-2.webp" alt=""> </div> <div class="video-info-grid"> <div class="channel-picture"> <img class="profile-picture" src="channel-pictures/channel-2.jpeg"> </div> <div class="video-info"> <p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p> <p class="video-author">Marques Brownlee</p> <p class="video-stats">3.4M views · 6 months ago</p> </div> </div> </div> <div class="video-preview"> <div class="thumbnail-row"> <img class="thumbnail" src="thumbnails/thumbnail-3.webp" alt=""> </div> <div class="video-info-grid"> <div class="channel-picture"> <img class="profile-picture" src="channel-pictures/channel-3.jpeg"> </div> <div class="video-info"> <p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p> <p class="video-author">Marques Brownlee</p> <p class="video-stats">3.4M views · 6 months ago</p> </div> </div> </div> <div class="video-preview"> <div class="thumbnail-row"> <img class="thumbnail" src="thumbnails/thumbnail-4.webp" alt=""> </div> <div class="video-info-grid"> <div class="channel-picture"> <img class="profile-picture" src="channel-pictures/channel-4.jpeg"> </div> <div class="video-info"> <p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p> <p class="video-author">Marques Brownlee</p> <p class="video-stats">3.4M views · 6 months ago</p> </div> </div> </div> <div class="video-preview"> <div class="thumbnail-row"> <img class="thumbnail" src="thumbnails/thumbnail-5.webp" alt=""> </div> <div class="video-info-grid"> <div class="channel-picture"> <img class="profile-picture" src="channel-pictures/channel-5.jpeg"> </div> <div class="video-info"> <p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p> <p class="video-author">Marques Brownlee</p> <p class="video-stats">3.4M views · 6 months ago</p> </div> </div> </div> <div class="video-preview"> <div class="thumbnail-row"> <img class="thumbnail" src="thumbnails/thumbnail-6.webp" alt=""> </div> <div class="video-info-grid"> <div class="channel-picture"> <img class="profile-picture" src="channel-pictures/channel-6.jpeg"> </div> <div class="video-info"> <p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p> <p class="video-author">Marques Brownlee</p> <p class="video-stats">3.4M views · 6 months ago</p> </div> </div> </div> </div> </body> </html> 
Top comments (0)