CodeMoon07 Comments - Answer Overflow

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

#parent {
    width: 40rem;
    height: 40rem;
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: darkslategray;
}

.child {
    background: lightseagreen;
}

.child:nth-child(2) {
    grid-column: span 2;
    background: lightcoral;
}

.child:nth-child(3) {
    grid-row: span 2;
    background: lightgreen;
}

.child:nth-child(4) {
    grid-column: span 2;
    background: lightsteelblue;
}

.child:nth-child(6) {
    grid-column: span 3;
    background: lightsalmon;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

#parent {
    width: 40rem;
    height: 40rem;
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: darkslategray;
}

.child {
    background: lightseagreen;
}

.child:nth-child(2) {
    grid-column: span 2;
    background: lightcoral;
}

.child:nth-child(3) {
    grid-row: span 2;
    background: lightgreen;
}

.child:nth-child(4) {
    grid-column: span 2;
    background: lightsteelblue;
}

.child:nth-child(6) {
    grid-column: span 3;
    background: lightsalmon;
}

11 replies

KPCKevin Powell - Community

•Created by CodeMoon07 on 2/9/2025 in #front-end

CSS Grid Layout Overflowing and Resizing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS Grid</title>
</head>
<body>
    <main id="parent">
        <div class="child">
            <h1>Tom</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, error! Totam quaerat voluptatem dicta nemo dolor expedita tempore similique eius.</p>
        </div>
        <div class="child"></div>
        <div class="child">
            <h1>Elisa</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, vero tempore dolor possimus, fugit dicta consequatur ipsa earum atque molestiae consequuntur quo quos voluptatum natus ea numquam cum a. Placeat?</p>
        </div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child">
            <h1>Elisa</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt laboriosam ducimus, cupiditate rem accusantium iste quasi dignissimos cum laudantium fugiat quas distinctio delectus nesciunt, aut dolores. Molestias amet nostrum consectetur in illo ducimus earum, laborum labore nam dignissimos dolorum beatae, pariatur officiis nesciunt at suscipit minima ullam. Fuga, facilis dolorum?</p>
        </div>
        <div class="child"></div>
    </main>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS Grid</title>
</head>
<body>
    <main id="parent">
        <div class="child">
            <h1>Tom</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, error! Totam quaerat voluptatem dicta nemo dolor expedita tempore similique eius.</p>
        </div>
        <div class="child"></div>
        <div class="child">
            <h1>Elisa</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, vero tempore dolor possimus, fugit dicta consequatur ipsa earum atque molestiae consequuntur quo quos voluptatum natus ea numquam cum a. Placeat?</p>
        </div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child">
            <h1>Elisa</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt laboriosam ducimus, cupiditate rem accusantium iste quasi dignissimos cum laudantium fugiat quas distinctio delectus nesciunt, aut dolores. Molestias amet nostrum consectetur in illo ducimus earum, laborum labore nam dignissimos dolorum beatae, pariatur officiis nesciunt at suscipit minima ullam. Fuga, facilis dolorum?</p>
        </div>
        <div class="child"></div>
    </main>
</body>
</html>

11 replies

KPCKevin Powell - Community

•Created by CodeMoon07 on 2/9/2025 in #front-end

CSS Grid Layout Overflowing and Resizing

The boxes should have a fixed size

11 replies

KPCKevin Powell - Community

•Created by CodeMoon07 on 2/9/2025 in #front-end

CSS Grid Layout Overflowing and Resizing

11 replies

Gaming

Programming