0

Is there a way to have a grid item that is alone in a row take up the rest of the space, if you have more than one column. Something like flex-grow.

Example

<div class="controller">
    <div class="item">hello</div>
    <div class="item">hello</div>
    <div class="item">hello</div>
    <div class="item">hello</div>
    <div class="item">bye</div>
</div>
<style>
    .controller {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem .75rem;
    }
    .item {
        background-color: aquamarine;
    }
</style>

I want the bye block to take up the rest of the space automatically, but it does this: enter image description here

I want it to do this automatically if its alone in a row. enter image description here

EDIT: This comment doesn't answer the question https://stackoverflow.com/a/75067528/8620333 a) its not automatic b) if you use the order property it will mess around with :child selector.

LOUKOUKOU
  • 11
  • 3
  • https://stackoverflow.com/a/75067528/8620333 – Temani Afif Feb 24 '23 at 13:48
  • @TemaniAfif its not automatic. Also as soon as you start playing around with the order css property it breaks everything. – LOUKOUKOU Feb 24 '23 at 14:09
  • not sure what are you talking about ... there is no order property in the link I shared – Temani Afif Feb 24 '23 at 14:21
  • yes, thats because the person who commented didn't consider the scenario. The commenter suggested targeting a specific item using the :nth-child selector, and if you use the order property (which the commenter doesn't), then the order of the children changes. – LOUKOUKOU Feb 24 '23 at 14:32

0 Answers0