Grid display columns have not equal width [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
With
grid-template-columns:1fr 1fr;
the 2 columns have different width in small(narrow) screen. I can not understand.
Thank you for any help.

Answer 1

In the ideal case, the two cells will have the same size.
But every cell has a minimum size! It is defined as the minimum content width. For example: the larger word, the larger button, or the larget image that it contains.
To avoid this, you should use minmax(0, 1fr) for each column definition. It allows you to say that 1fr, one fraction, is the maximum width of the column.
To sum up, use this code:
.grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
Here is a live demo of the problem and solution.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid--fix {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* Demo styles */
.grid {
grid-gap: 20px;
max-width: 400px;
}
.cell {
background: hotpink;
text-align: center;
padding: 1em;
}
<p>Exact same cells</p>
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
</div>
<p>The cells adapt their size to contain their content</p>
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2 is biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig</div>
</div>
<p>This behaviour could be disabled with <code>minmax(0, 1fr)</code></p>
<div class="grid grid--fix">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2 is biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig</div>
</div>