Search code examples
htmlcsswebfrontend

CSS Grid is not being visible

CSS grid is not working. Channel picture and texts must be in the grid, but text is under the channel picture. Where am I making a mistake?

Please help. Last two sentences are to add more details to my bloody post. So yea next sentences are useless as well. Stop reading these sentences now bro. Damn finally that "add more details" disappeared

browser picture

<!DOCTYPE html>
<html>
    <head>
        <title>YouTube.com</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=Roboto:wght@300;400;500&display=swap"
            rel="stylesheet"
        />

        <style>
            p {
                font-family: Roboto, Arial;
                margin-top: 0;
                margin-bottom: 0;
            }
            .thumbnail {
                width: 300px;
                display: block;
            }

            .thumbnail-row {
                margin-bottom: 12px;
            }

            .search-bar {
                display: block;
            }

            .video-title {
                font-size: 16px;
                font-weight: 500;
                line-height: 20px;
                margin-bottom: 12px;
            }

            .video-preview {
                display: inline-block;
                width: 300px;
                vertical-align: top;
                margin-right: 20px;
            }

            .video-info-grid {
                display: grid;
                grid-template-columns: 50px, 1fr;
            }

            .profile-picture {
                width: 40px;
                border-radius: 25px;
            }

            .thumbnail-row {
                margin-bottom: 12px;
            }

            .video-author {
                font-size: 14px;
                font-weight: 400;
                color: rgb(96, 96, 96);
                margin-bottom: 4px;
            }

            .video-stats {
                font-size: 14px;
                font-weight: 400;
                color: rgb(96, 96, 96);
            }
        </style>
    </head>

    <body>
        <input class="search-bar" type="text" placeholder="Search" />

        <div class="video-preview">
            <div class="thumbnail-row">
                <img class="thumbnail" src="images/iAmTheDanger.webp" />
            </div>

            <div class="video-info-grid">
                <div class="channel-picture">
                    <img class="profile-picture" src="images/danLysaik.jpg" />
                </div>
                <div class="video-info">
                    <p class="video-title">
                        Breaking Bad - Walt: "I am the one who knocks"
                    </p>
                    <p class="video-author">Dan Lysiak</p>
                    <p class="video-stats">10M views &#183; 11 years ago</p>
                </div>
            </div>
        </div>
    </body>
</html>

I was expecting to have a proper grid

Solution

  • The text is under the profile picture because you have a mistake in your grid CSS;

    grid-template-columns: 50px, 1fr; should not have a ,.

    Simply remove the comma (make it grid-template-columns: 50px 1fr; and the text will be next to the image.