Selecting a starting column and row for a series of grid items

问题

If I have this below, all the data will overlap because I told it to go to the same column and row. How can I make it start at the column and row I want and it "grow"?

If I remove the row, it goes down the page as expected. But what if I wanted it to start at Row 1/3, 5/12, etc.? Can you do that?

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
}

.content {
  grid-column: col-start 4 / span 7;
  grid-row: 1 / 3;
}

<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>

回答1:

You can set this style only on the first content

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
  grid-auto-rows: 20px;
}

.content {
  grid-column: col-start 4 / span 7;
  grid-row: span 2;
}

.content:first-child {
  grid-row: 1 / 3;
}

<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>

回答2:

I don't think there is a pure CSS Grid solution for such behavior, but there is still a clean and simple CSS solution.

Use a pseudo-element.

In grid layout (like in flex layout), pseudo-elements on the container are considered items. Therefore, insert a pseudo that will span across empty rows.

In the example below, your content items start on row 6. No need to alter the column rule.

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
}

.content {
  grid-column: col-start 4 / span 7;
  /* grid-row: 1 / 3; */
}

.mygrid::before {
  content: "";
  grid-row: 1 / span 5;
  grid-column: col-start 4 / span 7;
}

<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>

来源：https://stackoverflow.com/questions/50140780/selecting-a-starting-column-and-row-for-a-series-of-grid-items

标签

css

css3

css-grid