3

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?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jonny
  • 1,053
  • 1
  • 13
  • 26
  • Then you aren't looking for grid. This is a flexbox job – Temani Afif Jan 27 '20 at 15:29
  • This is not a very helpful comment - Why would you say grid is not suitable? – Jonny Jan 27 '20 at 15:30
  • 1
    because each item belong to a grid cell and there is no more relation between the different items and if you want to apply the "offset logic" then what you are describing is no more a grid. You cannot offset a column and have empty space between columns – Temani Afif Jan 27 '20 at 15:31
  • 1
    take a look at the bootstrap doc and how they implement the "offest logic" and you will get better idea about how to deal with this – Temani Afif Jan 27 '20 at 15:33
  • Thanks for that Termani. I have had a look and see that they use flexbox. – Jonny Jan 27 '20 at 15:34

1 Answers1

0

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>
demkovych
  • 7,827
  • 3
  • 19
  • 25
  • Hi @demkovych Thanks for the quick response. I have just edited my question, updating it with the fact that I would like this to be flexible so that if i was to update the other columns with an offset, they would flow automatically. So whilst your answer does answer my specific need here, I am only using it as an example, and this is not a flexible approach. – Jonny Jan 27 '20 at 15:28