CSS Grid 3 columns first and second same size middle fixed size

Question

I would like to create a grid with 3 columns, I want middle column to have fixed width but be always in center of the grid, meaning that first and last column fills the void but have same size.

this is what I got so far:

.grid {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 5;
    background-color: lightBlue;
    grid-template-columns: auto 50px auto;
}

.grid-item {
    border: 1px solid black;
    overflow: hidden;
}

<div class="grid">
    <div class="grid-item">A</div>
    <div class="grid-item">B</div>
    <div class="grid-item">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>

@TylerH no, couldn't find the right duplicate ... I am sure there is a trivial one but I am not finding the keywords — Temani Afif, Nov 03 '21 at 14:26
@TemaniAfif Hm, yeah it is easy to find ones with promising titles, but then the question's about something else entirely. This one's close, but sort of the inverse https://stackoverflow.com/questions/59470786/equal-width-sidebar-columns-with-css-grid EDIT: Now that I've revised this Q and its A, I think this is a good one: https://stackoverflow.com/questions/62127968/how-can-i-have-a-fixed-width-centered-column-with-in-a-3-column-layout — TylerH, Nov 03 '21 at 14:53

score 1 · Accepted Answer · answered Nov 02 '21 at 23:22

.grid {
    width: 100%;
    height: 100%;
    display: grid;
    background-color: lightBlue;
    grid-template-columns: 1fr 50px 1fr;
}

.grid-item {
    border: 1px solid black;
    overflow: hidden;
}

<div class="grid">
    <div class="grid-item">A</div>
    <div class="grid-item">B</div>
    <div class="grid-item">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>

CSS Grid 3 columns first and second same size middle fixed size

1 Answers1