CODEWITHSUNDEEP
csscss-grid
midaym
midaym

Reputation: 83

Reverse display order of css grid columns

I have a grid with a list of links displayed in a single row like a toolbar

a | b | c | d | e | f | g

is it possible as with flexbox to reverse this order

g | f | e | d | c | b | a

based on a specific screen size or should i stick with flexbox

https://codepen.io/hanakin/pen/wvKjgpx?editors=1100

.wrap {
  width: 960px;
  margin: 56px auto;
}

.c-bar {
  background-color: #343a40;
  display: grid;
  grid-auto-flow: column;
  width: calc(7 * 56px);
}

.c-action {
  color: #868e96;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: 56px;
  width: 56px;
}
.c-action:hover, .c-action:focus {
  background-color: #495057;
  outline: 0;
  color: #008dff;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
<div class="wrap">
	<section>
		<h5>Bar grid Tests</h5>
		<div class="c-bar">
			<a class="c-bar-item c-action" href="#">
				A
			</a>
			<a class="c-bar-item c-action" href="#">
				B
			</a>
			<a class="c-bar-item c-action" href="#">
				C
			</a>
			<a class="c-bar-item c-action" href="#">
				D
			</a>
			<a class="c-bar-item c-action" href="#">
				E
			</a>
			<a class="c-bar-item c-action" href="#">
				F
			</a>
			<a class="c-bar-item c-action" href="#">
				G
			</a>
		</div>
	</section>
</div>

Upvotes: 2

Views: 244

Answers (1)

Temani Afif
Temani Afif

Reputation: 272842

Maybe change the direction:

.wrap {
  margin: 56px auto;
}

.c-bar {
  background-color: #343a40;
  display: grid;
  grid-auto-flow: column;
  width: calc(7 * 56px);
  direction: rtl; /* added*/
}

.c-action {
  color: #868e96;
  display: -webkit-inline-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  width: 56px;
}

.c-action:hover,
.c-action:focus {
  background-color: #495057;
  outline: 0;
  color: #008dff;
  transition: 0.5s;
}
<div class="wrap">
  <section>
    <h5>Bar grid Tests</h5>
    <div class="c-bar">
      <a class="c-bar-item c-action" href="#">
				A
			</a>
      <a class="c-bar-item c-action" href="#">
				B
			</a>
      <a class="c-bar-item c-action" href="#">
				C
			</a>
      <a class="c-bar-item c-action" href="#">
				D
			</a>
      <a class="c-bar-item c-action" href="#">
				E
			</a>
      <a class="c-bar-item c-action" href="#">
				F
			</a>
      <a class="c-bar-item c-action" href="#">
				G
			</a>
    </div>
  </section>
</div>

Upvotes: 2

Related Questions