How to create a three-column responsive layout with icons and text? - html

Question

I tried creating a three-column layout like below (click on the image to see it larger) :
It's basically an unordered list. I used display: flex on the ul element and FontAwesome to display those icons.
ul class="goals-list">
<li><i class="fas fa-sun goals-icon"></i>Development of wind and solar power for the community. </li>
...
...
...
</ul>
As you can see the columns don't align well. The second column "Paving the community's roads", "Free Wifi", and "Doctors without borders visits" don't align at the same level.
I need a layout that aligns like a grid:
item1 item2 item3
item4 item5 item6
As the screen size is getting smaller I want them to wrap and automatically adjust like so:
item1 item2
item3 item4
item5 item6
mobile portait:
item1
item2
item3
item4
item5
item6
I also want a little bit of space between the icons and the text. I would like to know how would you approach this problem. If you would be able to give me some ideas I would be grateful.
The problem is I don't know where to start. I'm not even sure if using an unordered list is the right way to approach this problem.
The reason I have three columns is because I have a max-width: 1200px set for the container and that allows three columns to fit on the screen, but I think three columns look great on large 1920×1080 screens.

Answer 1

You can do it using below css:
.goals-list{
display: flex;
align-items: center;
justify-content: space-between;
}
li{
list-style-type: none;
display: flex;
align-items: center;
width: 33.33%;
word-break: break-all;
}
#media only screen and (max-width: 991px){
li{
width: 50%;
}
}
#media only screen and (max-width: 767px){
li{
width: 100%;
}
}

Answer 2

ul {
display: flex;
list-style: none;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
li {
flex: 0 0 33.33333%;
}
#media (max-width: 1200px) {
li {
flex: 0 0 50%;
}
}
#media (max-width: 780px) {
li {
flex: 0 0 100%;
}
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>

Answer 3

You can do this with css without using media queries.
ul {
display: flex;
flex-wrap: wrap;
}
ul li {
flex: 1 0 400px;
}
The 400px in the flex property sets that the element should be at least 400px (the actual property is flex-basis) this makes that if the available size is too small for 3 columns it will automatically make 2 columns of 500px (if the screen is 1000px).

Answer 4

You can use grid layout and CSS variables.
* {
margin: 0;
padding: 0;
}
.goals-list {
--column-num: 3;
display: grid;
grid-template-columns: repeat(var(--column-num), 1fr);
list-style: none;
}
li {
height: 100px;
background: red;
border: 3px solid black;
box-sizing: border-box;
}
#media (max-width: 1200px) {
.goals-list {
--column-num: 2;
}
}
#media (max-width: 780px) {
.goals-list {
--column-num: 1;
}
}
<ul class="goals-list">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>