How to prevent CSS grid from taking up full width?

Question

.layout-grid {
    margin: 0 auto;

    background-color: lime;

    display: grid;
    grid-template-columns: 200px 100px;
    grid-template-rows: auto;
    grid-gap: 1rem;
    grid-template-areas:
        "company company"
        "form billing";
}

<div class="layout-grid">
   <div style="grid-area: company">company</div>
   <div style="grid-area: form">form</div>
   <div style="grid-area: billing">billing</div>
</div>

This grid should bee about 316px width. 200 for the left column, 100 for the right + however big the grid-gap is.

Yet it's filling the full width of the page. How do I prevent that?

score 6 · Accepted Answer · answered Apr 05 '21 at 04:12

6

Because you're using block level grid which is always takes up the full width available. Use inline-grid instead.

.layout-grid {
    margin: 0 auto;

    background-color: lime;

    display: inline-grid;
    grid-template-columns: 200px 100px;
    grid-template-rows: auto;
    grid-gap: 1rem;
    grid-template-areas:
        "company company"
        "form billing";
}

<div class="layout-grid">
   <div style="grid-area: company">company</div>
   <div style="grid-area: form">form</div>
   <div style="grid-area: billing">billing</div>
</div>

answered Apr 05 '21 at 04:12

doğukan

23,073
13
57
69

Don't know why I didn't think for `inline-grid`. Thanks! How come it's not centering though? (`margin: 0 auto`) – mpen Apr 05 '21 at 04:23
1

[`margin:auto;` doesn't work on inline-block elements](https://stackoverflow.com/questions/19076919/marginauto-doesnt-work-on-inline-block-elements) you should use a wrapper – doğukan Apr 05 '21 at 04:26
Cool. I wrapped it in a flexbox and used `justify-content: space-around` instead of the `text-align` suggestion in that thread (which tends to center all text as the name suggests) – mpen Apr 05 '21 at 23:40

score 2 · Answer 2 · answered Apr 05 '21 at 09:09

You can use the new value of width like below:

.layout-grid {
    display: grid;
    width:-moz-fit-content;
    width:fit-content; /* OR max-content OR min-content */
    margin:auto;
    background:lime;
    grid-template-columns: 200px 100px;
    grid-template-rows: auto;
    grid-gap: 1rem;
    grid-template-areas:
        "company company"
        "form billing";
}

<div class="layout-grid">
   <div style="grid-area: company">company</div>
   <div style="grid-area: form">form</div>
   <div style="grid-area: billing">billing</div>
</div>

But it seems you want centring so simply use justify-content:center

.layout-grid {
    display: grid;
    background:lime;
    grid-template-columns: 200px 100px;
    justify-content:center;
    grid-template-rows: auto;
    grid-gap: 1rem;
    grid-template-areas:
        "company company"
        "form billing";
}

<div class="layout-grid">
   <div style="grid-area: company">company</div>
   <div style="grid-area: form">form</div>
   <div style="grid-area: billing">billing</div>
</div>

First one is closer to what I wanted (whole grid should fit content and be centered, not just the grid areas). Didn't know about those new width values. Pretty cool! — mpen, Apr 05 '21 at 23:38

How to prevent CSS grid from taking up full width?

2 Answers2