When using a display grid, the columns render correctly, at 50% width, with display flex, there is a small "offset".
Why does this occur?
I usually use flexto layout inside other elements, this kind of thing doesn't give me much confidence.
Note: Tested on Chromium / Firefox .
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding : 0;
margin : 0;
}
.flex-cols {
display : flex;
flex-direction: row;
margin-top : 1rem;
}
.grid-cols {
display: grid;
grid-template-columns: auto auto;
}
.col1 {
background-color: orange;
}
.col2 {
background-color: skyblue;
}
.text-content {
background: grey;
margin: 1rem auto;
width : 80%;
}
</style>
</head>
<body>
<div class="grid-cols">
<div class="col1">
<div class="text-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque aliquam tempora minus sunt dolor asperiores eveniet, repellendus ad cupiditate molestias assumenda hic tenetur illum quidem sapiente vero. Tempore, quae illum.
</div>
</div>
<div class="col2">
<div class="text-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque aspernatur eligendi.s
</div>
</div>
</div>
<div class="flex-cols">
<div class="col1">
<div class="text-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque aliquam tempora minus sunt dolor asperiores
eveniet, repellendus ad cupiditate molestias assumenda hic tenetur illum quidem sapiente vero. Tempore, quae
illum.
</div>
</div>
<div class="col2">
<div class="text-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse
tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque
aspernatur eligendi.s
</div>
</div>
</div>
</body>
</html>
The difference between the two
displayis thatdisplay: gridit is based on a corset of rows and columns anddisplay: flexnaturally adapts to the content of the container.What does this mean? That by defining the property with grid
grid-template-columns: auto autoyou are telling the browser to render the row with two columns with the same size each. On the other hand, with flex you are not defining any behavior for the columns, so the browser will give each one the size with which it judges that its content will be able to be displayed better (the more the content of the column occupies, the larger the size). going to give this one).If you want to make each column occupy half of its container with flex
flex: 1, you can use the . In this way you are saying that you want each column to occupy half of its container.Add this to your code:
either
After this you will notice that with display grid the containers will not have the same size, but the flex ones will, logically you are not going to use both, so for each use, each formula.