'CSS Grid divs does not respect sizes

I try to put text inside a grid area and this tend to change the size of this one but I tried to force the width then appears an "empty space"

I tried with "width: fit-content;" but it only show this empty space

.wrapper {
    display: grid;
    grid-auto-columns: minmax(200px, auto);
    grid-auto-rows: minmax(200px, auto);
}

.box1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background-color: red;
    width: fit-content;
}

.box2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    background-color: blue;
}

.box3 {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    background-color: green;
}

.text {
    width: 300px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="wrapper">
        <div class="box1">
            <div class="text">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error distinctio possimus laudantium sequi ad voluptas expedita libero, est ratione! In dolore quas laudantium doloribus quae mollitia nulla unde, reprehenderit magni!
            </div>
        </div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    
</body>
</html>
htmlcsslayoutcss-grid


Solution 1:[1]

The empty space is caused by the set width on your .text div. If this is not what you want, please edit your question to describe what you want it to look like.

.wrapper {
  display: grid;
  grid-auto-columns: minmax(200px, auto);
  grid-auto-rows: minmax(200px, auto);
}

.box1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: red;
  width: fit-content;
}

.box2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  background-color: blue;
}

.box3 {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  background-color: green;
}
<div class="wrapper">
  <div class="box1">
    <div class="text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error distinctio possimus laudantium sequi ad voluptas expedita libero, est ratione! In dolore quas laudantium doloribus quae mollitia nulla unde, reprehenderit magni!
    </div>
  </div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zach Jensz

Related Questions