Gregor Schafroth
Posted on
Daily Code 66 | CSS Grid (🟥 HTML & 🟦 CSS Course 8)
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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>CSS Grid</title><linkrel="preconnect"href="https://fonts.googleapis.com"><linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin><linkhref="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:12px0px;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:50px1fr;}.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:1fr1fr1fr;column-gap:15px;row-gap:40px;}</style></head><body><divstyle=" display: grid; grid-template-columns: 100px 100px; "><divstyle="background-color: lightblue;">div 1</div><divstyle="background-color: lightpink;"> div 2<p>text</p></div></div><divstyle=" margin-top: 30px; display: grid; grid-template-columns: 100px 1fr 1fr; "><divstyle="background-color: lightblue;">div 1</div><divstyle="background-color: lightpink;">div 2</div><divstyle="background-color: lightblue;">div 3</div></div><divstyle=" margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 20px; row-gap: 40px; "><divstyle="background-color: lightblue; height: 200px;">1fr</div><divstyle="background-color: lightpink; height: 200px;">1fr</div><divstyle="background-color: lightblue; height: 200px;">1fr</div><divstyle="background-color: lightpink; height: 200px;">1fr</div><divstyle="background-color: lightblue; height: 200px;">1fr</div><divstyle="background-color: lightpink; height: 200px;">1fr</div></div><inputclass="search-bar"type="text"placeholder="Search"><divclass="video-grid"><divclass="video-preview"><divclass="thumbnail-row"><imgclass="thumbnail"src="thumbnails/thumbnail-1.webp"alt=""></div><divclass="video-info-grid"><divclass="channel-picture"><imgclass="profile-picture"src="channel-pictures/channel-1.jpeg"></div><divclass="video-info"><pclass="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p><pclass="video-author">Marques Brownlee</p><pclass="video-stats">3.4M views· 6 months ago</p></div></div></div><divclass="video-preview"><divclass="thumbnail-row"><imgclass="thumbnail"src="thumbnails/thumbnail-2.webp"alt=""></div><divclass="video-info-grid"><divclass="channel-picture"><imgclass="profile-picture"src="channel-pictures/channel-2.jpeg"></div><divclass="video-info"><pclass="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p><pclass="video-author">Marques Brownlee</p><pclass="video-stats">3.4M views· 6 months ago</p></div></div></div><divclass="video-preview"><divclass="thumbnail-row"><imgclass="thumbnail"src="thumbnails/thumbnail-3.webp"alt=""></div><divclass="video-info-grid"><divclass="channel-picture"><imgclass="profile-picture"src="channel-pictures/channel-3.jpeg"></div><divclass="video-info"><pclass="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p><pclass="video-author">Marques Brownlee</p><pclass="video-stats">3.4M views· 6 months ago</p></div></div></div><divclass="video-preview"><divclass="thumbnail-row"><imgclass="thumbnail"src="thumbnails/thumbnail-4.webp"alt=""></div><divclass="video-info-grid"><divclass="channel-picture"><imgclass="profile-picture"src="channel-pictures/channel-4.jpeg"></div><divclass="video-info"><pclass="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p><pclass="video-author">Marques Brownlee</p><pclass="video-stats">3.4M views· 6 months ago</p></div></div></div><divclass="video-preview"><divclass="thumbnail-row"><imgclass="thumbnail"src="thumbnails/thumbnail-5.webp"alt=""></div><divclass="video-info-grid"><divclass="channel-picture"><imgclass="profile-picture"src="channel-pictures/channel-5.jpeg"></div><divclass="video-info"><pclass="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p><pclass="video-author">Marques Brownlee</p><pclass="video-stats">3.4M views· 6 months ago</p></div></div></div><divclass="video-preview"><divclass="thumbnail-row"><imgclass="thumbnail"src="thumbnails/thumbnail-6.webp"alt=""></div><divclass="video-info-grid"><divclass="channel-picture"><imgclass="profile-picture"src="channel-pictures/channel-6.jpeg"></div><divclass="video-info"><pclass="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p><pclass="video-author">Marques Brownlee</p><pclass="video-stats">3.4M views· 6 months ago</p></div></div></div></div></body></html>Top comments(0)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse
