Padding text with content of grid - html

Question

I'm using grid layout in CSS and I have a span, with a grid on the bottom.
Each cell of my grid have a centered content and i would like to add padding on left and right to my text for being align with the content of cell in both side.
I would like a full css solution, but i'm not sure if it's possible...
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
<div class="grid-container grid-container--fill">
<div class="grid-element">
<div class="inner">
</div>
</div>
<div class="grid-element">
<div class="inner">
</div>
</div>
<div class="grid-element">
<div class="inner">
</div>
</div>
<div class="grid-element">
<div class="inner">
</div>
</div>
</div>
Here is a jsfiddle if u want to try some stuff :
https://jsfiddle.net/s4Lxwrm5/

Answer 1

Here you go buddy:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: auto;
position: relative;
display: block;
overflow: auto;
background-color: grey;
}
.container-inner {
width: 100%;
max-width: 1248px; /* SET YOUR MAX WIDTH */
height: auto;
margin: 0 auto;
padding: 20px; /* SET YOUR PADDING */
position: relative;
display: block;
overflow: auto;
background-color: orange;
}
.text-container {
width: 100%;
height: auto;
margin: 0 auto 20px auto;
padding-left: calc((100% / 4) / 10); /* WORK OUT THE WIDTH OF ONE GRID BOX BY DIVIDING BY THE NUMBER OF BOXES YOU ARE 'gridding'. THEN DIVIDING BY 10 WILL GIVE YOU THE 10% PADDING THAT I SPECIFY LATER ON IN THE CSS */
padding-right: calc((100% / 4) / 10); /* WORK OUT THE WIDTH OF ONE GRID BOX BY DIVIDING BY THE NUMBER OF BOXES YOU ARE 'gridding'. THEN DIVIDING BY 10 WILL GIVE YOU THE 10% PADDING THAT I SPECIFY LATER ON IN THE CSS */
position: relative;
text-align: justify;
background-color: red;
}
.supporting-boxes {
width: 100%;
height: auto;
position: relative;
display: grid;
grid-template-columns: repeat(auto-fill, 25%);
background-color: green;
}
.grid-box {
width: 80%; /* LEAVING 10% PADDING */
height: auto;
min-height: 200px;
position: relative;
justify-self: center;
background-color: purple;
}
.box-content {
width: 100%;
height: auto;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: pink;
}
<div class="container">
<div class="container-inner">
<div class="text-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="supporting-boxes">
<div class="grid-box">
<div class="box-content">
A
</div>
</div>
<div class="grid-box">
<div class="box-content">
B
</div>
</div>
<div class="grid-box">
<div class="box-content">
C
</div>
</div>
<div class="grid-box">
<div class="box-content">
D
</div>
</div>
</div>
</div>
</div>
This is quite volatile code though, if you're changing the number of boxes and stuff we may need to look for another solution.