Setting grid items to not Overlap when sharing the same row and column

Question

Right now, when two grid items share the same row and column they overlap each over.

<div class="some-grid-container">
    <div style="grid-row: 1; grid-column: 1">Item 1</div>
    <div style="grid-row: 1; grid-column: 1">Item 2</div>
</div>

How do I them not overlap? Probably behave like flex items when sharing the same row and column. (Without making an outer container).

Answer 1

Your syntax is not correct. Inline styles are not using those braces "{", "}". And additionally you need to specify the "Item 2" in the second column. If you use the same row and same column then both divs are in the same place for sure.

Try...

CSS:

.some-grid-container{
  display: grid;
  grid-template-columns: auto;
}

HTML:

<div class="some-grid-container">
    <div style="grid-row: 1; grid-column: 1;">Item 1</div>
    <div style="grid-row: 1; grid-column: 2;">Item 2</div>
</div>

This should create a 100% width grid with 2 equally sized columns.