I can't align a div container at the bottom of an image.
What I've tried is editing the attribute position of the image and set it's value to "relative".
Explaining this is a little bit difficult, but I got html and css code snippets with a little preview:
codepen.io/Proudyy/pen/PoOjYpK
(it's not 84 lines long, so not too much in my opinion)
This is how it should look like:
https://imgur.com/a/LShx2cM
set position: absolute for .skin-item-footer and position: relative on it's parent div. Check below code
.skin-item-splashart {
width: 100%;
border-radius: 12px;
position: relative;
}
.skin-item-footer-left-container {
grid-column: 1;
display: grid;
grid-template-rows: repeat(2, auto);
align-self: start;
height: 100%;
}
.skin-item-footer-right-container {
grid-column: 2;
display: grid;
align-items: center;
justify-content: end;
align-self: end;
height: 100%;
}
.skin-item-default-name {
font-size: 24px;
font-weight: bold;
margin-left: 3vh;
}
.skin-item-name {
font-size: 18px;
color: gainsboro;
margin: 0;
margin-left: 3vh;
grid-row: 1;
}
.skin-item-cost {
display: grid;
grid-row: 2;
grid-template-columns: repeat(2, auto);
grid-template-rows: 1fr;
}
.skin-item-cost-value {
color: gainsboro;
grid-column: 1;
margin: 0;
}
.skin-item-cost-icon {
grid-column: 2;
margin: 0;
}
.skin-item-save-icon {
cursor: pointer;
margin-right: 2vh;
}
.skin-item {
background-color: rgb(0, 40, 75);
margin: 15px;
border-radius: 12px;
height: auto;
width: 50%;
position: relative;
}
img{
max-width: 100%;
}
.skin-item-footer {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 0 0 12px 12px;
position: absolute;
bottom: 0;
height: auto;
width: 100%;
}
<div class="skin-item">
<img class="skin-item-splashart" src="https://cdn.communitydragon.org/latest/champion/1/splash-art/skin/1"/>
<div class="skin-item-footer">
<div class="skin-item-footer-left-container">
<p class="skin-item-name">SkinName</p>
<div class="skin-item-cost">
<img class="skin-item-cost-icon" src="https://raw.communitydragon.org/latest/plugins/rcp-fe-lol-static-assets/global/default/images/icon-rp-24.png"/>
<p class="skin-item-cost-value">Spaceholder</p>
</div>
</div>
<div class="skin-item-footer-right-container">
<img class="skin-item-save-icon" src="https://img.icons8.com/color/32/000000/save--v1.png"/>
</div>
</div>
</div>
Related
Here is the JSfiddle complete code link:
CODE
my clock code output
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #0b172a;
font-family: sans-serif;
}
#container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 5rem;
color: white;
text-transform: uppercase;
}
.clock-ctr {
position: relative;
border: 2px solid white;
height: 80vh;
width: 80vw;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.hour-ctr {
grid-area: hour;
}
.min-ctr {
grid-area: min;
}
.sec-ctr {
grid-area: sec;
}
.ampm {
grid-area: ampm;
background: #bc4123;
}
.time-ctr {
position: absolute;
height: 70%;
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
grid-template-areas: "hour min sec" "ampm ampm ampm";
}
h1 {
margin-bottom: 1rem;
letter-spacing: 8px;
font-size: 2.5rem;
}
.time-box {
background: #bc4123;
border-radius: 10px;
display: grid;
justify-items: center;
align-items: center;
height: auto;
text-align: center;
font-weight: bold;
font-size: 28px;
}
<div id="container">
<h1 class="clock-title">Clock</h1>
<div class="clock-ctr">
<div class="time-ctr">
<div class="hour-ctr time-box">
<p class="hour-value">00</p>
<p class="hour-title">Hour</p>
</div>
<div class="min-ctr time-box">
<p class="min-value">00</p>
<p class="min-title">Minute</p>
</div>
<div class="sec-ctr time-box">
<p class="sec-value">00</p>
<p class="sec-title">Second</p>
</div>
<p class="ampm time-box">AM</p>
</div>
</div>
</div>
Can any one tell me how to improve this code
I tried to make is completely responsive but it is not not working,
I tired to use flex to make the element appear in center of page.
Then I use grid to create the clock layout and i didn't knew how to align the cells so I used grid again in them. I was using rem and em to make responsive code but it didn't work out well. please review my code.
This is because of the font-size of the time-box div that is not responsive (28px whatever the device size), To make it responsive I added media queries to change the font depending on the device width, As presented in this example:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #0b172a;
font-family: sans-serif;
}
#container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 5rem;
color: white;
text-transform: uppercase;
}
.clock-ctr {
position: relative;
border: 2px solid white;
height: 80vh;
width: 80vw;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.hour-ctr {
grid-area: hour;
}
.min-ctr {
grid-area: min;
}
.sec-ctr {
grid-area: sec;
}
.ampm {
grid-area: ampm;
background: #bc4123;
}
.time-ctr {
position: absolute;
height: 70%;
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
grid-template-areas: "hour min sec" "ampm ampm ampm";
}
h1 {
margin-bottom: 1rem;
letter-spacing: 8px;
font-size: 2.5rem;
}
.time-box {
background: #bc4123;
border-radius: 10px;
display: grid;
justify-items: center;
align-items: center;
height: auto;
text-align: center;
font-weight: bold;
}
#media (min-width:768px) {
.time-box {
font-size: 18px;
}
}
#media (min-width:1024px) {
.time-box {
font-size: 22px;
}
}
#media (min-width:1280px) {
.time-box {
font-size: 28px;
}
}
<div id="container">
<h1 class="clock-title">Clock</h1>
<div class="clock-ctr">
<div class="time-ctr">
<div class="hour-ctr time-box">
<p class="hour-value">00</p>
<p class="hour-title">Hour</p>
</div>
<div class="min-ctr time-box">
<p class="min-value">00</p>
<p class="min-title">Minute</p>
</div>
<div class="sec-ctr time-box">
<p class="sec-value">00</p>
<p class="sec-title">Second</p>
</div>
<p class="ampm time-box">AM</p>
</div>
</div>
</div>
You can as well use calc() function, so you can calculate your font size relative to the screen width like this:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #0b172a;
font-family: sans-serif;
}
#container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 5rem;
color: white;
text-transform: uppercase;
}
.clock-ctr {
position: relative;
border: 2px solid white;
height: 80vh;
width: 80vw;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.hour-ctr {
grid-area: hour;
}
.min-ctr {
grid-area: min;
}
.sec-ctr {
grid-area: sec;
}
.ampm {
grid-area: ampm;
background: #bc4123;
}
.time-ctr {
position: absolute;
height: 70%;
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
grid-template-areas: "hour min sec" "ampm ampm ampm";
}
h1 {
margin-bottom: 1rem;
letter-spacing: 8px;
font-size: 2.5rem;
}
.time-box {
background: #bc4123;
border-radius: 10px;
display: grid;
justify-items: center;
align-items: center;
height: auto;
text-align: center;
font-weight: bold;
font-size: calc(18px + 0.390625vw);
}
<div id="container">
<h1 class="clock-title">Clock</h1>
<div class="clock-ctr">
<div class="time-ctr">
<div class="hour-ctr time-box">
<p class="hour-value">00</p>
<p class="hour-title">Hour</p>
</div>
<div class="min-ctr time-box">
<p class="min-value">00</p>
<p class="min-title">Minute</p>
</div>
<div class="sec-ctr time-box">
<p class="sec-value">00</p>
<p class="sec-title">Second</p>
</div>
<p class="ampm time-box">AM</p>
</div>
</div>
</div>
the issue with the CSS code in the Stack Overflow question is that the left and right values for the #nav element are set to 0. This causes the element to take up the full width of its parent element, which is likely not the intended behavior.
To fix this issue, you can try setting the left and right values to auto like this:
#nav {
position: fixed;
top: 0;
left: auto;
right: auto;
width: 100%;
height: 60px;
background-color: white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
With this change, the #nav element will no longer take up the full width of its parent element and will instead be positioned at the top of the page with its width set to 100%.
I am trying to align content inside rows of an article vertically with each other
This is in the card component
`
<div className="user-card">
<img
className="avatar"
src={`/assets/${user.homeTeam}.png`}
alt={user.homeTeam}
/>
<img
className="avatar"
src={`/assets/${user.awayTeam}.png`}
alt={user.awayTeam}
/>
<div className="info">
<h3>
{user.homeTeam} vs {user.awayTeam}
</h3>
<span style={{ margin: "1em" }}></span>
<img
alt=""
src="/assets/calendar.svg"
style={{ height: "40px", width: "40px" }}
/>
<span style={{ margin: "0.5em" }}></span>
<h3>{user.Date}</h3>
<span style={{ margin: "1em" }}></span>
<img
alt=""
src="/assets/stadium.svg"
style={{ height: "40px", width: "40px" }}
/>
<span style={{ margin: "0.5em" }}></span>
<h3>{user.location} </h3>
<span style={{ margin: "1em" }}></span>
{/* <p>
Score: {user.homeTeamScore} - {user.awayTeamScore}
</p> */}
<button class="button button-green width-auto">Book Ticket</button>
</div>
</div>
`
App.css
`
.App {
text-align: center;
width: 95%;
max-width: 800px;
margin: 6rem auto 0;
}
.user-container {
display: grid;
justify-content: center;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.card-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
}
.button.width-auto {
width: 130px;
padding: 0 15px;
max-width: none;
}
.button.button-green {
background-color: #219f45;
}
[role="button"],
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
cursor: pointer;
}
.button {
display: block;
text-align: center;
width: 100px;
max-width: 130px;
margin: 0;
height: 45px;
line-height: 45px;
color: #fff !important;
padding: 0;
border: none;
cursor: pointer;
font-size: 14px;
transition: all 0.1s linear;
font-family: EncodeSansExpanded-Bold, arial, tahoma;
}
.user-card {
display: flex;
padding: 1rem;
text-align: left;
margin-left: 1rem;
margin-bottom: 0.5rem;
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
width: 1200px;
margin: 2em;
border: 1px solid grey;
border-radius: 5px;
cursor: pointer;
transition: all 0.25s ease;
}
.user-card:hover {
background-color: #0a0a0a;
}
.avatar {
display: flex;
width: 50px;
height: 50px;
border-radius: 50%;
}
.info {
align-items: center;
display: flex;
text-align: left;
margin-left: 1rem;
}
.info h3,
.info p {
align-items: center;
margin-bottom: 0.5rem;
}
div {
align-items: center;
justify-content: left;
}
.user-post {
max-width: 500px;
width: 95%;
margin: 0 auto;
}
.user-post h2 {
margin: 1rem auto;
color: white;
}
.user-post a {
cursor: pointer;
text-decoration: none;
}
.user-card__image {
display: flex;
}
.user-post a:hover {
color: #5dd4ac;
}
#media (max-width: 600px) {
.user-container {
grid-template-columns: 1fr;
}
}
`
and I am creating cards from my home file inside an article
I need every element in the card to be aligned on all rows. I tried placing every element in a div with a class that has display: flex and align-content: left, but no hope
Update:
You should first group the elements you want to be together in a div. So the country flags + names together, calendar icon + date and time, stadium icon + stadium name and you can leave the button as it is.
Then you should give .user-card a display: grid; and grid-template-columns: 2fr 2fr 2fr 1fr; (depends on what size you want every grid column to be).
I'm trying to represent this structure horizontaly, but I'm having some issues on what should I change so that this can work properly. What I hope to achieve is that those small squares in the bottom appear the same, only verticaly, on top of each other, while the bigger square keeps it's model.
.date-grid {
width: 120px;
height: 100px;
display: flex;
flex-direction: column;
}
.node {
width: 100%;
height: 100%;
background: #e9ecef;
border: none;
padding: 0;
}
time {
display: block;
height: 75%;
font-size: 24px;
display: flex;
flex-direction: column;
justify-content: center;
}
.smallHolder {
width: 100%;
height: 25%;
display: flex;
}
.smallHolder>div {
width: 25%;
height: 100%;
flex-shrink: 0;
flex-grow: 1;
}
.next { background: #0060df; }
.last { background: #d53343; }
<div class="date-grid">
<button class="node">
<time>3</time>
<div class="smallHolder">
<div class="next"></div>
<div class="last"></div>
</div>
</button>
</div>
Is this the sort of thing you're looking for? grid is great for this sort of thing.
.date-grid {
height: 100px;
display: grid;
grid-template-columns: 120px 25px;
grid-template-rows: 1fr 1fr;
grid-template-areas: "gray next" "gray last";
padding: 0;
border-style: none;
}
.gray {
grid-area: gray;
display: grid;
place-content: center;
background: #e9ecef;
}
time {
font-size: 24px;
}
.next {
grid-area: next;
background: #0060df;
}
.last {
grid-area: last;
background: #d53343;
}
<button class="node date-grid">
<time class='gray'>3</time>
<div class="next"></div>
<div class="last"></div>
</button>
I created blazor calendar component which consists of two parts Header and weekview components. The component flex lines go beyond the component itself and I could not figure out Why? I have attached a screenshot of the issue.
Header (Calendar Component) code
<div class="maincontainer">
<div class="viewtitle">Augest 2022</div>
<div class="lbuttons">
<button class="button"><</button>
<button class="button">></button>
<button class="button">Today</button>
</div>
<div class="mbuttons">
<label class="datelabel">Monady, Augest 21, 2022</label>
<input class="dateinput" type="datetime-local" id="schedule-time"
name="schedule-time" value="2022-06-12T19:30"
min="2022-06-07T00:00" max="2022-06-14T00:00">
<input class="button" type="button" id="btnsubmit" value="Submit">
</div>
<div class="rbuttons">
<button class="button" #onclick="#(() => DayView_Click())" #onclick:stopPropagation="true">Day</button>
<button class="button" #onclick="#(() => WeekView_Click())" #onclick:stopPropagation="true">Week</button>
<button class="button" #onclick="#(() => MonthView_Click())" #onclick:stopPropagation="true">Month</button>
</div>
</div>
#switch (CurrentView)
{
case CalendarViewOption.MonthView:
<MonthViewComponent></MonthViewComponent>
break;
case CalendarViewOption.DayView:
<DayViewComponent></DayViewComponent>
break;
case CalendarViewOption.WeekView:
<WeekViewComponent></WeekViewComponent>
break;
}
CSS
body {
margin: 0;
padding: 0;
}
.maincontainer {
background: #E7EAF6;
display: grid;
grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr);
grid-template-rows: auto
}
.viewtitle {
grid-column: 1/4;
grid-row: 1;
justify-self: center;
padding: 5px 5px 5px 5px;
color: darkblue;
font-weight: bold;
font-size: 16px;
}
.lbuttons {
grid-column: 1/2;
grid-row: 2;
justify-self: start;
}
.mbuttons {
grid-column: 2/3;
grid-row: 2;
justify-self: center;
}
.rbuttons {
grid-column: 3/4;
grid-row: 2;
justify-self: end;
}
.button {
background-color: black;
color: white;
border: 2px solid #555555;
padding: 3px;
margin: 0;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: white;
color: black;
}
.datelabel {
color: black;
font-weight: bold;
}
.dateinput {
padding: 3px 3px;
margin: 2px 0;
border: 1px solid rgb(130, 128, 128);
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
}
WeekView
<div class="calendar-container">
<div class="header">
<ul class="weekdays">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
<ul class="daynumbers">
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
</ul>
</div>
<div class="timeslots-container">
<ul class="timeslots">
<li>8<sup>am</sup></li>
<li>9<sup>am</sup></li>
<li>10<sup>am</sup></li>
<li>11<sup>am</sup></li>
<li>12<sup>pm</sup></li>
<li>4<sup>pm</sup></li>
<li>5<sup>pm</sup></li>
<li>6<sup>pm</sup></li>
<li>7<sup>pm</sup></li>
<li>8<sup>pm</sup></li>
<li>9<sup>pm</sup></li>
<li>10<sup>pm</sup></li>
</ul>
</div>
<div class="event-container">
<div class="slot slot-1">
<div class="event-staus"></div>
<span>Event A</span>
</div>
<div class="slot slot-2" style="height: 60px; grid-row: 1; grid-column: 1;">
<div class="event-staus"></div>
<span>Event A</span>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
}
.calendar-container {
display: grid;
grid-template-columns: 50px auto;
grid-template-rows: auto;
gap: 1px 1px;
grid-template-areas:
". header"
"timeslots-container main";
background: #325288;
}
.weekdays,
.daynumbers {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.daynumbers {
min-height: 1em;
}
.weekdays {
background: #19456B;
color: white
}
.header {
background-color: gainsboro;
grid-area: header;
}
.timeslots-container {
background-color: lightgray;
grid-area: timeslots-container;
align-items: center;
}
.timeslots {
display: flex;
flex-direction: column;
align-items: center;
}
.timeslots li {
min-height: 60px;
}
.timeslots li::after {
content: "";
position: absolute;
left: 10px;
width: 100%;
height: 1px;
background: lightgray;
z-index: 1;
}
.event-container {
display: grid;
grid-template-columns: repeat(7, auto);
grid-template-rows: repeat(48, auto);
grid-area: main;
position: relative;
}
.slot {
position: absolute;
background: darkcyan;
border-radius: 5px;
z-index: 5;
color: white;
font-size: 12px;
}
.slot-1 {
height: 30px;
grid-row: 106;
grid-column: 3;
}
Screenshot
Your issue is with:
.timeslots li::after {
content: "";
position: absolute;
left: 10px;
width: 100%;
height: 1px;
background: lightgray;
z-index: 1;
}
setting it to left: 10px is a mistake and why its causing your code to look like this, because technically it is taking left: 10px on the entire page. You need to set it so that it does not overlap the li element by setting it to relative so it stays inside.
So I have done a few changes to your css.
First I added this css:
.calendar-container {
overflow: hidden;
}
Then I set the li elements to relative:
.timeslots li {
position: relative;
}
then I adjusted your li::after css:
.timeslots li::after {
left: 0px;
width: 3000px;
}
this should solve your problem since the ::after now stays inside the li and not the entire page, and the overflow: hidden hides any overflow that causes side-scroll.
I have a Popular News section where I'm trying to display six news articles in a flex pattern. The problem I'm having is that I cannot get the flex items to be closer together. How do I do that?
EDIT: I've added the entire code for the bottom half.
This is how it currently looks:
This is how I want it to look:
.firstsection {
width: 100%;
height: 100;
}
.firstsection h1 {
color: rgb(255, 255, 255);
display: block;
font-size: 36px;
font-weight: 300;
line-height: 42.0001px;
padding-bottom: 14px;
text-align: center;
}
.firstsection {
display: block;
width: 100%;
height: 400px;
background-color: #414141;
float: left;
}
.bottomheader {
margin-top: 40px;
color: white;
font-size: 40px;
position: relative;
top: -20px;
}
.READMORE {
display: inline;
position: relative;
top: -40px;
left: 642px;
font-size: 16px;
text-align: center;
border: 1px solid white;
height: 50px;
padding: 20px;
}
.pop .READMORE a {
color: white;
text-decoration: none;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: black;
width: 30%;
border-top: 3px solid red;
background-color: white;
height: 80px;
}
.firstsection {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.pop {
float: right;
height: 100px;
width: 100%;
text-align: center;
}
<section style="background-color: #293352" class="pop">
<h1 class="bottomheader">Popular News</h1>
<h4 class="READMORE">READ MORE</h4>
</section>
<section style="background-color: #293352" class="firstsection">
<h3 class="h1">content</h3>
<h3 class="h2">content</h3>
<h3 class="h3">content</h3>
<h3 class="h4">content</h3>
<h3 class="h5">content</h3>
<h3 class="h6">content</h3>
</section>
All you really need to do is add align-content: flex-start. This aligns wrapped lines to the start of the flex container and has similar options as align-items. See align-content
I created a fiddle
.firstsection {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
}
In this example I changed the 'cards' to divs and used a card class, and added a little padding. This may or may not be what you want but maybe it helps.
You can use the CSS GRID to align them properly.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.firstsection {
display: block;
width: 100%;
background-color: #293352;
padding: 50px 20px;
}
h3 {
color: black;
width: 100%;
border-top: 3px solid red;
background-color: white;
height: 130px;
margin: 0;
}
.firstsection {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
<section class="firstsection">
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
</section>
Codepen: https://codepen.io/manaskhandelwal1/pen/XWjobLx
here is another approach with grid , using pseudo elements to shrink the visible rows to the center, and sizing a few elements via width and max-width:
example below to run in fullpage mode then resize the window to see if the behavior is what you expect.
body {
margin: 0;
background-color: #293352;
}
.grid {
display: grid;
grid-template-rows: auto 1fr;
min-height: 100vh;
}
.pop {
color: white;
text-align: center;
position: relative;
padding: 1em 10em;
}
.pop h4 {
position: absolute;
right: 1rem;
top: 0.5rem;
border: solid 1px;
padding: 1em;
}
section.firstsection {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr repeat(auto-fill, max-content) 1fr;
align-items: center;
width: max-content;
max-width:100%;
margin: auto;
gap: 1em;
}
.firstsection:before,
.firstsection:after {
content: "";
grid-column: span 3;
}
.firstsection > * {
box-sizing: border-box;
min-width: 26%;
background: white;
height: 100%;
padding: 1em;
border-top: solid red;
max-width:30vw;
}
<div class="grid">
<section class="pop">
<h1 class="bottomheader">Popular News</h1>
<h4 class="READMORE">READ MORE</h4>
</section>
<section class="firstsection">
<h3 class="h1">content</h3>
<h3 class="h2">content</h3>
<h3 class="h3">content</h3>
<h3 class="h4">content <br> and an extra line</h3>
<h3 class="h5">content</h3>
<h3 class="h6">content or grow the column to my width if there's enough room.</h3>
</section>
</div>
here is a codepen with a grid of 9 boxes to play with : https://codepen.io/gc-nomade/pen/dypwYvY