How to put title under the div?-CodePudding

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 >
  <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 >Title9</div>
  <div>Title10</div>
  <div>Title11</div>
</div>

I needed it to look like this:

CodePudding user response：

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 >
  <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 >Title9</div>
  <div>Title10</div>
  <div>Title11</div>
</div>

CodePudding user response：

You can use relative positioning to position the text to the bottom outside of the containing 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*/
}

.box {
  position: relative;
 
}

.text {
  position: absolute;
  bottom: -20px;
  background-color: unset !important;
}

<div >
  <div ><div >Title1</div></div>
  <div ><div >Title2</div></div>
  <div ><div >Title3</div></div>
  <div ><div >Title4</div></div>
  <div ><div >Title5</div></div>
  <div ><div >Title6</div></div>
  <div ><div >Title7</div></div>
  <div ><div >Title8</div></div>
  <div ><div >Title9</div></div>
  <div ><div >Title10</div></div>
  <div ><div >Title11</div></div>
</div>

CodePudding user response：

Since text itself can't be styled (only element that contains it can be styled) it's position is limited to boundaries of it's box, so if you need move it beyond the boundaries of it's box, you'll need another element:

.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*/
}
.small
{
  height: 100px;
  width: 100px;
}

/* added */
.container > div
{
  position: relative;
}
.container > div > span
{
  position: absolute;
  bottom: -1em; /* height of the text */
}

<div >
  <div><span>Title1</span></div>
  <div><span>Title2</span></div>
  <div ><span>Title3</span></div>
  <div><span>Title4</span></div>
  <div><span>Title5</span></div>
  <div><span>Title6</span></div>
  <div><span>Title7</span></div>
  <div><span>Title8</span></div>
  <div ><span>Title9</span></div>
  <div><span>Title10</span></div>
  <div><span>Title11</span></div>
</div>

CodePudding user response：

The easiest option is to move the text to be a sibling of the <div> you wish to show it beneath, and wrap both elements in another wrapper element:

.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;
}

/* here we style the .card element (the wrapper element
   into which the original <div> and the newly-created
   <h2> element is wrapped): */
.card {
  display: grid;
  /* we style the first row of the .card to take as
     much space as possible, once the <h2> is sized
     with the minimum space possible to contain its
     content: */
  grid-template-rows: 1fr min-content;
}

.card > 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 >
  <div >
    <div>&lt;div&gt; element 1</div>
    <h2>Title</h2>
  </div>
  <div >
    <div>&lt;div&gt; element 2</div>
    <h2>Title</h2>
  </div>
  <div >
    <div>&lt;div&gt; element 3</div>
    <h2>Title</h2>
  </div>
  <div >
    <div>&lt;div&gt; element 4</div>
    <h2>Title</h2>
  </div>
  <div >
    <div>&lt;div&gt; element 5</div>
    <h2>Title</h2>
  </div>
  <div >
    <div>&lt;div&gt; element 6</div>
    <h2>Title</h2>
  </div>
  <div >
    <div>&lt;div&gt; element 7</div>
    <h2>Title</h2>
  </div>
  <div >
    <div>&lt;div&gt; element 8</div>
    <h2>Title</h2>
  </div>
  <div >
    <div>&lt;div&gt; element 9</div>
    <h2>Title</h2>
  </div>
  <div >
    <div>&lt;div&gt; element 10</div>
    <h2>Title</h2>
  </div>
  <div >
    <div>&lt;div&gt; element 11</div>
    <h2>Title</h2>
  </div>
</div>

JS Fiddle demo.

Or, without the wrapper element:

/* here we define some common custom properties,
   for use in the following CSS: */
:root {
  /* subheading font-size: */
  --fs-subheading: 1.3em;
  --grid-row-height: 250px;
  --grid-gap: 20px;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 240px);
  /* The width */
  /* using the created custom property to define the
     grid-auto-row height: */
  grid-auto-rows: var(--grid-row-height);
  /* The height */
  grid-auto-flow: dense;
  /*This is the important property*/
  /* The margin */
  /* using the custom property to set the gap (or grid-gap): */
  grid-gap: var(--grid-gap);
  /* because we're moving the text into the space 'occupied'
     by the grid-row-gap, we here update its size using the
     CSS calc() function, to calculate the original --grid-gap
     size and adding the font-size of the subheading (<h2>)
     element so that it's contained adequately without over-
     lapping the following grid-row: */
  grid-row-gap: calc( var(--grid-gap)   var(--fs-subheading));
  /* because we have a variable, I chose to use the calc()
     function to implement the padding: */
  padding: calc(var(--grid-gap) / 2);
}

.container div {
  /* and, again, for the border-radius: */
  border-radius: calc(var(--grid-gap) / 2);
  background-color: #2E5173;
}

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

h2 {
  /* positioning the element, to move it out of its original location: */
  position: relative;
  /* this calculation is, unfortunately, a little bit 'magic-numbers'
     since it's based on what looks okay to me, obviously if this can
     be abstracted with an appropriate algorithm that would be much
     better, and easier to maintain: */
  top: calc(100% - 10px);
}

<div >
  <div>
    <h2>Title1</h2>
  </div>
  <div>
    <h2>Title2</h2>
  </div>
  <div>
    <h2>Title3</h2>
  </div>
  <div>
    <h2>Title4</h2>
  </div>
  <div>
    <h2>Title5</h2>
  </div>
  <div>
    <h2>Title6</h2>
  </div>
  <div>
    <h2>Title7</h2>
  </div>
  <div>
    <h2>Title8</h2>
  </div>
  <div >
    <h2>Title9</h2>
  </div>
  <div>
    <h2>Title10</h2>
  </div>
  <div>
    <h2>Title11</h2>
  </div>
</div>

JS Fiddle demo.

References: