I have a challenge where I am rendering data into a single div and I am exploring the possibility of using CSS to create three lines between the four columns. Even though it would be easier if I used separate columns with borders, I prefer the flexibility of a single div that expands as more items are added.
To better illustrate my goal, I have attached a screencap that demonstrates what I am trying to achieve.
HTML snippet:
<div class="all-training">
<h2>All Training Courses</h2>
<div class="row">
<div class="col">
<ul class="all-courses-ul"></ul>
</div>
</div>
</div>
CSS snippet:
.all-courses-ul {
display: block;
}
.all-courses-ul li {
display: inline-block;
font-size: 15px;
list-style-type: none;
padding-bottom: 30px;
text-align: left;
width: 25%;
}
JS snippet:
import testjson from './test.json';
function loadAllCourses() {
let jsonRes = testjson.d.results.map(function(val) {
return {
"Title": val.Title
}
});
let allTitles = jsonRes;
for (var i = 0; i < allTitles.length; i++) {
$(".all-courses-ul").append("<li>" + allTitles[i].Title + "</li>")
};
} // ------------------ loadAllCourses
loadAllCourses();