Move column items to grid css column

Asked

Viewed 305 times

-2

I want to know if there is a way to move an item within a column to another column using css grid. Follow example:

inserir a descrição da imagem aqui

here I wanted to move this green div to the second column of the purple div using css grid tags.

<div class="container">
  <header>header</header>
  <nav>menu</nav>
  <main>
    <div></div>
  </main>
  <span>span</span>
  <footer>footer<footer>
</div>


html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

header {
  grid-area:  headerr;
  background-color: pink;
}

nav {
  grid-area: navv;
  background-color: blue;
}

span {
  grid-area: spann;
  background-color: yellow;
}

main {
  grid-area: mainn;
  background-color: red;
}

main > div {
 width: 220px;
 height: 52px;
 background-color: green;
}

footer {
  grid-area: footerr;
  background-color: black;
}

.container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-areas:
  'headerr headerr headerr headerr headerr headerr'
  'headerr headerr headerr headerr headerr headerr'
  'navv navv navv navv navv navv'
  'spann mainn mainn mainn mainn mainn'
  'spann mainn mainn mainn mainn mainn'
  'spann mainn mainn mainn mainn mainn'
  'spann mainn mainn mainn mainn mainn'
  'spann mainn mainn mainn mainn mainn'
  'footerr footerr footerr footerr footerr footerr';
}
css css3 front-end grid

1 answer

0

I’ve never seen someone using grid-template-areas that way, but if you want to swap the positions of elements like Divs just use grid-Row on the items to switch between top/bottom and grid-Columns between left/right.

* {
  box-sizing: border-box;
  margin:0;
}

.container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  height: 100%;
  grid-gap: 3px;
  background-color: black;
}

.container > div {
  text-align: center;
  line-height: 50px;
}

.container > div:nth-child(odd) {
  background-color:green;
}

.container > div:nth-child(even) {
  background-color:blue;
}

/* Precisa explicitar a coluna atual da célula*/
.container > div:nth-child(2) {
  animation: baixo 2s infinite;
  grid-column: 2/3; /* Referenciando à segunda coluna */
}

.container > div:nth-child(5) {
  animation: cima 2s infinite;
  grid-column: 2/3; /* Referenciando à segunda coluna */
}

/* Trocando as posições */
@keyframes baixo {
  0% {grid-row: 1/2}
  100% {grid-row: 2/3}
}

@keyframes cima {
  0% {grid-row: 2/3}
  100% {grid-row: 1/2}
}
<!DOCTYPE html>
<html>
<head>
  <title>Exemplo</title>
</head>
  <body>
  <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
  </div>
</body>
</html>

Browser other questions tagged css css3 front-end grid

You are not signed in. Login or sign up in order to post.