How to offset a grid item, also shifting its siblings? [duplicate]

问题

I am using CSS Grids. I want to offset an element so that it horizontally moves across the grid columns. I also want this element to retain its current width, and apply the offset value in addition to the element's width.

Example:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.item {
  grid-column: span 1;
  background-color: orange;
  border: black solid 1px;
  height: auto;
  padding: 20px;
  text-align: center;
}

.offset {
  margin-left: 100px;
}

<div class="container">
  <div class="item offset">1/4</div>
  <div class="item">1/4</div>
  <div class="item">1/4</div>
</div>

The problem is that I want the three grid items to simply shift along to the right handside whilst maintaining their current widths as defined by grid-column: span 3;

I would really like to keep this flexible so that I don't have to adjust other columns accordingly. ie - if I was trying to offset the second column, I would want the last column to move automatically.

How can I achieve this?

回答1:

I'm not 100% sure what you want to achieve, but maybe this will help:

.container {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  padding-left: 100px;
}

.item {
  grid-column: span 1;
  background-color: orange;
  border: black solid 1px;
  height: auto;
  padding: 20px;
  text-align: center;
}

<div class="container">
  <div class="item offset">1/4</div>
  <div class="item">1/4</div>
  <div class="item">1/4</div>
</div>

来源：https://stackoverflow.com/questions/59934024/how-to-offset-a-grid-item-also-shifting-its-siblings

标签

html

css

css-grid