How can I shuffle grid elements without ruining the layout? - Stack Overflow

admin管理员组

文章数量:1290186

As you can see in the example I have 6 elements "other-news" (colored Fuchsia) on the right side of the grid stacked in 3x2 format. I want to be able to bring them to the left side and keep them together in this 3x2 format. I tried to switch the order with the 2 elements class="articles secondary-stories" (colored coral red) (they have to go to the right side) by doing a copy/paste but this ruins my layout. How can I place the 6 elements to the left side and keep them together like in the original layout? Click "expand snippet" or "Full page" for better viewing the layout.

body {
  font-family: 'Vollkorn', Geia, serif;
  font-weight: 400;
}
h1,h2,h3 {
  font-weight: 900;
  margin:0;
}
.headlines {
  display:grid;
  grid-gap: 10px;
}
.articles {
  background: #ddd;
  border-top: 1px solid #4bc6df;
}
.articles img {
  width: 100%;
}
.articles p {
  padding: 5px;
  margin:0;
}
.kicker {
  font-weight: 900;
  color: #005689;
}
a, a:hover, a:focus, a:visited {
  color: #000 !important;
  text-decoration:none;
}
a:hover {
  text-decoration: underline;
}
.sub-title:before {
  content: "..............";
  display: block;
  color: #aaa;
}
.main-stories .main-title {
  font-size: 1.5em;
  font-weight: 900;
}
.main-stories .mainPara {
  display:none;
}
.secondary-stories .secondary-title {
  font-size: 1.2em;
  font-weight: 900;
}
.secondary-stories {
  display:grid;
  grid-template-columns: 125px 1fr;
  background-color: coral;
}
.secondary-stories .sub-title {
  grid-column: span 2
}
@media (min-width: 756px) {
  .headlines {
    grid-template-columns: repeat(4, 1fr)
  }
  .section-title {
    grid-column: span 4;
  }
  .main-stories {
    grid-column: span 3;
    grid-row: span 3;
    display:grid;
    grid-gap:10px;
    grid-template-column: repeat (3, 1fr)
  }
  .main-stories .mainPara {
    display:block;
  }
  .main-stories img {
    grid-column: 2/4;
    grid-row: 1/2;
  }
  .main-stories .main-title {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .other-news {
    background-color: fuchsia;
  }
  .secondary-stories {
    grid-row: span 3;
    display: block;
    background-color: coral;

  }
}

@media (min-width: 1156px) {
  .headlines {
    grid-template-columns: repeat(5, 1fr)
  }
  .section-title {
    grid-column: span 1;
    grid-row: span 6
  }
}

<div class="headlines">
  <div class="section-title"><h1 data-faker="word">Headlines</h1></div>
  <div class="articles main-stories">articles main-stories</div>
  <div class="articles secondary-stories add-subtitle">secondary-stories add-subtitle</div>
  <div class="articles secondary-stories">Secondary-stories</div>
  <div class="articles secondary-stories">Secondary-stories</div>
  <div class="articles other-news">Other news</div>
  <div class="articles other-news">Other news</div>
  <div class="articles other-news">Other news</div>
  <div class="articles other-news">Other news</div>
  <div class="articles other-news">Other news</div>
  <div class="articles other-news">Other news</div>
</div>

本文标签： How can I shuffle grid elements without ruining the layoutStack Overflow