JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="test6.css">
    <title>Responisve Grid</title>
</head>
<body>

    <div class="wrapper">
        <header class="header">
            <a href="#" class="logo"><h2>Logo</h2></a>
            <nav class="navbar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Über uns</a></li>
                    <li><a href="#">Impressum</a></li>
                </ul>
            </nav>

        </header>

        <main class="main">

            <article>
                <img src="https://cdn.pixabay.com/photo/2023/08/06/07/19/field-8172323_1280.jpg" alt="" class="picture">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui, asperiores. Sapiente voluptatem repudiandae iure quo maxime doloribus necessitatibus laudantium reprehenderit sint placeat obcaecati, officiis voluptas impedit incidunt perferendis nulla eius.</p>
            </article>

            <article>
                <img src="https://cdn.pixabay.com/photo/2023/07/04/19/43/man-8106958_1280.png" alt="" class="picture">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui, asperiores. Sapiente voluptatem repudiandae iure quo maxime doloribus necessitatibus laudantium reprehenderit sint placeat obcaecati, officiis voluptas impedit incidunt perferendis nulla eius.</p>
            </article>

            <article>
                <img src="https://cdn.pixabay.com/photo/2023/08/15/21/50/squirrel-8192899_1280.jpg" alt="" class="picture">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui, asperiores. Sapiente voluptatem repudiandae iure quo maxime doloribus necessitatibus laudantium reprehenderit sint placeat obcaecati, officiis voluptas impedit incidunt perferendis nulla eius.</p>
            </article>

    ...

CSS

* {
    box-sizing: border-box;
}

html {
    background-color: gray;
}

body {
    margin: 0;
    padding: 0;
}

.wrapper {
    max-width: 1100px;
    height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-areas:
    "nav nav nav"
    "body body body"
    "footer footer footer";
    grid-template-rows: 60px 1fr 50px;

}

.header {
    grid-area: nav;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(6, 78, 138);
}

.main {
    grid-area: body;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: center;
    gap: 2rem;

}

footer {
    grid-area: footer;
}



/* ### navbar_small ### */


/* ### navbar_big ### */

.navbar ul {
    display: flex;
    list-style: none;
    gap: 1rem;
    margin-right: 2rem;

}

.logo {
    color: white;
    text-decoration: none;
    margin-left: 3rem;
    font-size: larger;
    
}

/* ### main #### */

.picture {
    width: 300px;
    height: auto;
    
}


/* ### Footer ### */

.__footer > ul {
    display: flex;
    list-style: none;
    gap: 1rem;
    justify-content: end;
    margin-right: 2rem;
}