How do I equally place multiple divs on multiple rows? - css

Question

I'd like to place divs equally spaced on multiple rows. I've tried setting margins or justify-content but none of them worked so far. I want the course-lists in each row to be equally spaced but the space between the lists depends on the length of the name of the courses when I tried setting margins. I'm new to CSS so I'm sorry if the question or my codes are confusing.
HTML
<div className="course-section">
<div>
<h2 id="course-tag">Coursework</h2>
</div>
<div className="course-box">
<div className="course-list-row">
<div className="course-bullet"></div>
<div className="course-list">Data Structures</div>
<div className="course-bullet"></div>
<div className="course-list">Computer Architecture</div>
</div>
<div className="course-list-row">
<div className="course-bullet"></div>
<div className="course-list">Numerical Analysis</div>
<div className="course-bullet"></div>
<div className="course-list">Numerical Methods</div>
</div>
<div className="course-list-row">
<div className="course-bullet"></div>
<div className="course-list">Discrete Structures</div>
<div className="course-bullet"></div>
<div className="course-list">Intro to Computer Science</div>
</div>
<div className="course-list-row">
<div className="course-bullet"></div>
<div className="course-list">Applied Linear Algebra</div>
<div className="course-bullet"></div>
<div className="course-list">Physics Courses</div>
</div>
</div>
</div>
CSS
#mixin bullet {
height: 15px;
width: 15px;
background-color: blue;
display: inline-block;
}
#mixin resume-box {
background-color: white;
height: 350px;
width: 700px;
margin: auto;
overflow: hidden;
-webkit-box-shadow: 0 0 15px 3px #b0abaa;
-moz-box-shadow: 0 0 15px 3px #b0abaa;
box-shadow: 0 0 15px 3px #b0abaa;
}
.course-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
#course-tag {
margin-bottom: 40px;
margin-right: 530px;
font-weight: bold;
font-size: 30px;
}
.course-box {
#include resume-box;
margin-bottom: 80px;
padding: 40px 50px 40px 50px;
}
.course-bullet {
#include bullet;
}
.course-list {
display: inline-block;
margin-left: 10px;
font-size: 20px;
}
.course-list-row {
margin-bottom: 20px;
}
}
It's what I want.

Answer 1

Well I think it can be simplyfied like this:
HTML:
<div class="course-section">
<div>
<h2 id="course-tag">Coursework</h2>
</div>
<div class="course-box">
<div class="course-list">Data Structures</div>
<div class="course-list">Computer Architecture</div>
<div class="course-list">Numerical Analysis</div>
<div class="course-list">Numerical Methods</div>
<div class="course-list">Applied Linear Algebra and lorem ipsum dolor sit amet</div>
<div class="course-list">Discrete Structures</div>
<div class="course-list">Intro to Computer Science</div>
<div class="course-list">Physics Courses</div>
</div>
</div>
scss:
#mixin bullet {
height: 15px;
width: 15px;
background-color: blue;
display: inline-block;
}
#mixin resume-box {
background-color: white;
height: 350px;
width: 700px;
margin: auto;
overflow: hidden;
box-shadow: 0 0 15px 3px #b0abaa;
}
* {
box-sizing: border-box;
}
.course-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
#course-tag {
margin-bottom: 40px;
margin-right: 530px;
font-weight: bold;
font-size: 30px;
}
.course-box {
#include resume-box;
display: flex;
flex-wrap: wrap;
padding: 40px 50px 40px 50px;
.course-list {
flex: 0 0 50%;
position: relative;
font-size: 20px;
padding-left: 35px;
&:before {
content: '';
position: absolute;
left: 10px;
top: 3px;
#include bullet;
}
}
}
}
The important things here are:
* {
box-sizing: border-box;
}
Flex does not really need this, but i usually use this box-sizing so margins and paddings won't get sum to dom elements total height and/or width. I find border-box to be more precise.
.course-box {
display: flex;
flex-wrap: wrap;
}
The container is set to flex so we can use the flex property of its child elements to have them aligned and distributed. flex-wrap: wrap basically does what it says, force content inside a flex container to wrap when width is reached. (try to put it as nowrap in the snippet and see what happens)
.course-list {
flex: 0 0 50%;
}
Finally, we set the flex property of the list elements to 0 0 50%, this basically translates into 0 (this element can't be shrinked) 0 (this element can't be expanded) 50% (width of the element). So if you would like to have 3 elements per row it would be 0 0 33% and so.
You could even make it responsive. For example:
.course-list {
flex: 0 0 50%;
#media only screen and (max-width: 767px) {
flex: 0 0 100%;
}
}
this would result into two column rows in desktop and one column rows in mobile.
Also, avoid use a div to fake a bullet, better use the :after or :before pseudo elements as the snippet below, it will result in much cleaner html.
Here is a snippet:
* {
box-sizing: border-box;
}
.course-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.course-section #course-tag {
margin-bottom: 40px;
margin-right: 530px;
font-weight: bold;
font-size: 30px;
}
.course-section .course-box {
background-color: white;
height: 350px;
width: 700px;
margin: auto;
overflow: hidden;
box-shadow: 0 0 15px 3px #b0abaa;
display: flex;
flex-wrap: wrap;
padding: 40px 50px 40px 50px;
}
.course-section .course-box .course-list {
flex: 0 0 50%;
position: relative;
font-size: 20px;
padding-left: 35px;
}
.course-section .course-box .course-list:before {
content: "";
position: absolute;
left: 10px;
top: 3px;
height: 15px;
width: 15px;
background-color: blue;
display: inline-block;
}
<div class="course-section">
<div>
<h2 id="course-tag">Coursework</h2>
</div>
<div class="course-box">
<div class="course-list">Data Structures</div>
<div class="course-list">Computer Architecture</div>
<div class="course-list">Numerical Analysis</div>
<div class="course-list">Numerical Methods</div>
<div class="course-list">Applied Linear Algebra and lorem ipsum dolor sit amet</div>
<div class="course-list">Discrete Structures</div>
<div class="course-list">Intro to Computer Science</div>
<div class="course-list">Physics Courses</div>
</div>
</div>