DEV Community

Cover image for Daily Code 66 | CSS Grid (πŸŸ₯ HTML & 🟦 CSS Course 8)
Gregor Schafroth
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>
<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 &#183; 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 &#183; 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 &#183; 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 &#183; 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 &#183; 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 &#183; 6 months ago</p>
        </div>
      </div>
    </div>

  </div>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)