How do I equally space out css grid columns? - html

Question

I have a grid that displays data in a tabular format. The previous developer at my company used the grid-template-columns and minmax properties to implement the view but one of the tables has a a wide first column and every other column is alright. How do I equally space them out so they're the same width?
I've tried using minmax(auto, 1fr) and repeat(auto-fill, minmax(max-content, 1fr)) but it just messes up the entire structure of the view
The main container has the following CSS:
display: grid;
grid-template-columns: minmax(min-content, 30%) 1fr auto;
justify-content: center;
And the prt of the page that displays the table data is this :
display: grid;
grid-template-columns: minmax(auto, 1fr);
I expect the spacing to be equal across every column
View image

Answer 1

Here's an example of 3 equal columns using grid:
.parent {
background: blue;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
height: 100%;
width: 100%;
}
.child-1 {
background: red;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3 end;
}
.child-2 {
background: green;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3 end;
}
.child-3 {
background: black;
grid-column-start: 3;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3 end;
}
#-- Non-Grid Styles --#
body {
height: 100vh;
margin: 0;
width: 100vw;
}
.child-1,
.child-2,
.child-3 {
align-items: center;
color: white;
display: flex;
justify-content: center;
}
<div class="parent">
<div class="child-1">child 1</div>
<div class="child-2">child 2</div>
<div class="child-3">child 3</div>
</div>
This link has excellent explanations of how to use grid: Grid Info