Search code examples
htmlcsscss-grid

Create a 7x3 grid of images

I am trying to get a grid of images 7 wide and 3 deep. The images should all fit perfectly in 3 rows. I can't work out the CSS to get them to display in that way. I thought they would automatically line up horizontally because they are essentially inline-block but they form a long line down the middle of the page (see image). I have added my HTML below. When I float: left; or display:inline-block; the images it has no effect. When you run the code below you can see that it displays in the way I would expect/want it to.

The website URL is here

enter image description here

<div id="imagelist">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.26.33.png
" alt="pies" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.26.08.png" alt="salmon" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.18.10.png
" alt="eggs" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.23.54.png" alt="dough" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.19.34.png" alt="scallops" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.18.24.png" alt="shopfront" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.15.48.png" alt="egg" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.22.37.png" alt="fullenglish" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.25.09.png" alt="bread" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.21.29.png" alt="board" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.20.37.png" alt="bacon" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.25.34.png" alt="bread" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.17.35.png" alt="egg" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.18.47.png
" alt="fullenglish" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.26.51.png" alt="shop" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.21.12.png" alt="risotto" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.24.13.png" alt="egg" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.24.53.png" alt="brownie" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.16.36.png" alt="board" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.16.16.png" alt="mushroom" height="182px" width="182px">
 <img src="http://ec2-52-48-176-104.eu-west-1.compute.amazonaws.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-19-at-14.15.19.png" alt="sandwich" height="182px" width="182px">
</div>

Solution

  • There is some issues on your renderd html, some br tag has come, which you can check in console window.

    console window

    You can use following css to resolved this:

    #imagelist br {
    display: none;
}