html - Making a responsive grid layout of images by way of <ul><li></li></ul> -

i'm trying make grid of images responsive changes in size of browser.

how accomplish using list?

ideally, i'd make stay in evenly spaced rows. so, sizes there 3 rows of 4 on top , 1 of 3 on bottom - best if row of 3 centered, there isn't 'missing square' in bottom right.

the way set right works - mobile. make scale larger desktop or tablet use.

.main{  	width:22.5rem;  	margin: 0 auto;  	position: relative;    }    .interest {  	width: 80%;  	margin: 0 auto;  	text-align: center;  }    .interest li {  	float: left;  	margin: 5px;  	width: 5.375rem;  	height: 6.5rem;  	line-height: 70%;  }    .interest img {  	width: 5.375rem;  	height: 5.375rem;  }    .interest {  	margin: 0 auto;  	width: 5.375rem;  	height: 1rem;  	font-size: .75rem;    }    .interest a:hover{  	color: lightyellow;  }

<div class="main">    <div class="interest">    <ul>  	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing thing</a></li>  	<li><a href="#/thing"><img class="portal" src="img/thing.svg">crime/<br>thing</a></li>  	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>  	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>  	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>  	<li><a href="#/thing"><img class="portal" src="img/thingl.svg">gun thing</a></li>  	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing/safety</a></li>  	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>  	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>  	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing rel</a></li>  	<li><a href="#/thing"><img class="portal" src="img/jthing.svg">jobs/economy</a></li>  	<li><a href="#/thing"><img class="portal" src="img/thing.svg">quality of thing</a></li>  	<li><a href="#/thing"><img class="portal" src="img/thing.svg">reproduction</a></li>  	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>  	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing services</a></li>  </ul>    </div>  			  </div>

so, fixed using flex boxes @raphael disanto said.

so far, code works reorganizing images on changes in size of window. still have add specific image scaling images not change position relative screen size, change size too.

.flex-container {    padding: 0;    margin: 0;    list-style: none;        display: -webkit-box;    display: -moz-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;        -webkit-flex-flow: row wrap;    justify-content: space-around;  }    .flex-item {      padding: 0px;    width: 130px;    height: 150px;    margin-top: 10px;        line-height: 10px;    color: white;    }    .flex-item img {      -webkit-transition: .2s ease-in-out;  	-moz-transition: .2s ease-in-out;  	transition: .2s ease-in-out;  	width: 70%;    }    .flex-item p {    }    .flex-item {    font-weight: bold;    line-height: 15px;    font-size: 1em;    text-align: center;    	-webkit-transition: .2s ease-in-out;  	-moz-transition: .2s ease-in-out;  	transition: .2s ease-in-out;  /*  line-height: 100px;  */}    .flex-item a:hover {  	-webkit-transform: scale(1.05);  	-moz-transform: scale(1.05);  	transform: scale(1.05);  }

<div>  <div class="flex-container">  <div class="flex-item">  	<a href="#/civilliberties"><img src="img/civil_liberties.svg"></br>civil liberties</a>  </div>  <div class="flex-item">  	<a href="#/crimeandpunishment"><img src="img/crime_and_punishment.svg"></br>crime/<br>punishment</a>  </div>  <div class="flex-item">  	<a href="#/education"><img src="img/education.svg"></br>education</a>  </div>  <div class="flex-item">  	<a href="#/energy"><img src="img/energy.svg"></br>energy</a>  </div>  <div class="flex-item">  	<a href="#/environment"><img src="img/environment.svg"></br>environment</a>  </div>  <div class="flex-item">  	<a href="#/guncontrol"><img src="img/gun-control.svg"></br>gun control</a>  </div>  <div class="flex-item">  	<a href="#/healthsafety"><img src="img/health-safety.svg"></br>health/safety</a>  </div>  <div class="flex-item">  	<a href="#/immigration"><img src="img/immigration.svg"></br>immigration</a>  </div>  <div class="flex-item">  	<a href="#/infrastructure"><img src="img/infrastructure.svg"></br>infrastructure</a>  </div>  <div class="flex-item">  	<a href="#/internationalrelations"><img src="img/international-rel.svg"></br>international rel</a>  </div>  <div class="flex-item">  	<a href="#/jobseconomy"><img src="img/jobs-economy.svg"></br>jobs/economy</a>  </div>  <div class="flex-item">  	<a href="#/qualityoflife"><img src="img/quality-of-life.svg"></br>quality of life</a>  </div>  <div class="flex-item">  	<a href="#/reproduction"><img src="img/reproduction.svg"></br>reproduction</a>  </div>  <div class="flex-item">  	<a href="#/taxes"><img src="img/taxes.svg"></br>taxes</a>  </div>  <div class="flex-item">  	<a href="#/socialservices"><img src="img/social-services.svg"></br>social services</a>  </div>  </div>  </div>