How to put title under the div?

April 3, 2022

I’m trying to add title below the div, but it always stays on top. How can I make it stay under the div?

.container {
  display:grid;
  grid-template-columns:repeat(auto-fit,240px); /* The width */
  grid-auto-rows:250px; /* The height */
  grid-auto-flow:dense; /*This is the important property*/
  /* The margin */
  grid-gap:20px;
  padding:10px;
}
.container div {
  border-radius: 10px;
  background-color: #2E5173;
}

.big {
  grid-column:span 2; /* Take twice the width*/
  grid-row:span 2; /* Take twice the height*/
}

<div class="container">
  <div>Title1</div>
  <div>Title2</div>
  <div>Title3</div>
  <div>Title4</div>
  <div>Title5</div>
  <div>Title6</div>
  <div>Title7</div>
  <div>Title8</div>
  <div class="big">Title9</div>
  <div>Title10</div>
  <div>Title11</div>
</div>

I needed it to look like this:

>Solution :

If this is really what you want, you can use pseudo element. But normally, to handle more complex cases, you may not want this way.

.container {
  display:grid;
  grid-template-columns:repeat(auto-fit,240px); /* The width */
  grid-auto-rows:250px; /* The height */
  grid-auto-flow:dense; /*This is the important property*/
  /* The margin */
  grid-gap:20px;
  padding:10px;
}
.container div {
  border-radius: 10px;
  background-color: #2E5173;
}
.container div::before {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
}
.big {
  grid-column:span 2; /* Take twice the width*/
  grid-row:span 2; /* Take twice the height*/
}

<div class="container">
  <div>Title1</div>
  <div>Title2</div>
  <div>Title3</div>
  <div>Title4</div>
  <div>Title5</div>
  <div>Title6</div>
  <div>Title7</div>
  <div>Title8</div>
  <div class="big">Title9</div>
  <div>Title10</div>
  <div>Title11</div>
</div>