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

问题

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).

回答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.

回答2:

Wrap the items in a container.

Example:

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

.some-grid-container>div {
  grid-column: 1;
  grid-row: 1;
}

.some-grid-container>div>div {
  background: red;
}

<div class="some-grid-container">
  <div>
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>

来源：https://stackoverflow.com/questions/49974503/setting-grid-items-to-not-overlap-when-sharing-the-same-row-and-column