Kevin Powell - Community•2w ago

CSS Grid Layout Overflowing and Resizing

I've made a grid layout with some containers and when I put content into each container the layout breaks and isn't stable.

8 Replies

CodeMoon07OP•2w ago

The boxes should have a fixed size

Jochem•2w ago

Please check out #how-to-ask-good-questions and share your code in any other form than screenshots

CodeMoon07OP•2w ago

<!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>

* {
    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;
}

Alex•2w ago

Your elements are changing size because without defined dimensions, they will fill the space available to them. The columns are defined in terms of fr units, where 1fr is a proportional fraction of the available space after accounting for anything which takes up a fixed amount of space... such as the content of the other children. To preserve the aspect ratio and proportions of the whole grid, you need to use a less 'permissive' unit. Grid and fr units are designed to resize in this way to prevent content overflows.

capt_uhu•2w ago

Declaring your rows would be a good place to start. If you do want a truly fixed size then you'll need something like px or em instead of fr

grid-template-rows: repeat(3, 1fr);

grid-template-rows: repeat(3, 1fr);

CodeMoon07OP•2w ago

that worked thanks

CodeMoon07OP•2w ago

Gaming

Programming

CSS Grid Layout Overflowing and Resizing

Did you find this page helpful?