arranging the list items to some ordered graphically - css

Question

I am working on a simple pivot data from a table and trying to display the data in a horizontal list. I want to make the design as responsive to show also in mobile. Below is my simple css code
.menu{
width:700px; margin:0 auto;
}
.menu li{
display: inline;
list-style: none;
float: left;
margin-right: 2em;
padding: 0;
text-align:center;
}
.menu .fa {
display: block;
}
.selected {
color: green;
}
.menu li:hover{
color: green;
}
.list-heading {
font-weight: normal;
}
<h3 class="list-heading">WeekName</h3>
<h3 class="list-heading">DayName</h3>
<ul class="menu">
<li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 6</span></li>
<li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 5</span></li>
<li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 4</span></li>
<li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 3</span></li>
<li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 2</span></li>
<li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 1</span></li>
</ul>
I want to display the data like this Image:

Answer 1

There's lots of ways to accomplish this. Personally I'd probably use flex but if you want to stick with an unordered list element you can just set the li children to display: inline-block and allow the DOM flow to do what it's supposed to do like shown below;
Side NOTE: the <!-- --> between the li elements is one way to negate the spacing that an inline-block element has by default without needing to add negative margins etc.
Hope this helps, cheers.
.menu{
margin:0 auto;
list-style: none;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
.menu li{
display: inline-block;
padding: 0;
text-align: center;
width: 120px;
border: gray 1px solid;
padding: .5em;
}
.menu .fa {
display: block;
margin: 0 auto;
margin: .5em 0;
}
.selected {
color: green;
}
.menu li:hover{
color: green;
}
.list-heading {
font-weight: normal;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h3 class="list-heading">WeekName</h3>
<h3 class="list-heading">DayName</h3>
<ul class="menu">
<li><i class="fa fa-cutlery fa-1x"></i><span>Meal 6</span></li><!--
--><li><i class="fa fa-glass fa-1x"></i><span>Meal 5</span></li><!--
--><li><i class="fa fa-cutlery fa-1x"></i><span>Meal 4</span></li><!--
--><li><i class="fa fa-glass fa-1x"></i><span>Meal 3</span></li><!--
--><li><i class="fa fa-cutlery fa-1x"></i><span>Meal 2</span></li><!--
--><li><i class="fa fa-glass fa-1x"></i><span>Meal 1</span></li>
</ul>

Answer 2

Replace with this css
body{
margin: 0px;
padding: 0px;
background: #ccc;
}
.menu{
display: flex;
flex-wrap: wrap;
padding:0px;
}
.menu li{
display: flex;
flex-direction: column;
width: 30vw;
height: 30vh;
justify-content: center;
align-items: center;
background: #fff;
margin: 6px auto;
}
.menu li i{
font-size:24px;
width:60px;
height:60px;
line-height:60px;
text-align:center;
border:1px solid #ccc;
border-radius:50%;
margin-bottom:12px;
cursor:pointer;
}
Html Goes here ....
<ul class="menu">
<li><i class="fas fa-plus"></i><span>Meal 6</span></li>
<li><i class="fas fa-plus"></i><span>Meal 6</span></li>
<li><i class="fas fa-plus"></i><span>Meal 6</span></li>
<li><i class="fas fa-plus"></i><span>Meal 6</span></li>
<li><i class="fas fa-plus"></i><span>Meal 6</span></li>
<li><i class="fas fa-plus"></i><span>Meal 6</span></li>
</ul>

Answer 3

You can achieve this with a CSS media query. You'll need to define the width desired for when they change the stack order. I've set it to 480px. See my fiddle example below.
.menu{
width:700px; margin:0 auto;
}
.menu li{
display: inline;
list-style: none;
float: left;
margin-right: 2em;
padding: 0;
text-align:center;
}
.menu .fa {
display: block;
}
.selected {
color: green;
}
.menu li:hover{
color: green;
}
.list-heading {
font-weight: normal;
}
#media screen and (max-width: 480px) {
.menu li {
margin: 0;
width: 30%;
}
}
<h3 class="list-heading">WeekName</h3>
<h3 class="list-heading">DayName</h3>
<ul class="menu">
<li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 6</span></li>
<li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 5</span></li>
<li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 4</span></li>
<li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 3</span></li>
<li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 2</span></li>
<li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 1</span></li>
</ul>
https://jsfiddle.net/mbc59e38/

Answer 4

you can use flex to layout easier. It all depends on your needs and html structure so sometimes you need to use with media queries. But try with flex first
.menu{
max-width:700px; margin:0 auto;
}
.menu li{
display: flex;
list-style: none;
flex-wrap: wrap;
margin-right: 2em;
padding: 0;
text-align:center;
}
.menu .fa {
display: block;
}
.selected {
color: green;
}
.menu li:hover{
color: green;
}
.list-heading {
font-weight: normal;
}