How do I add 7 images in a row html & css-CodePudding

How do I fit 7 images in a row using purely HTML & CSS with no added Jquery or JavaScript?

I did not yet try this but I would like to know as this is for an upcoming project

CodePudding user response：

I would suggest using grid or flex. Personally i would use grid since it's easier to for example have equal sized childs compared to flex imo.

HTML

<div >
  <div >pic1</div>
  <div >pic2</div>
  <div >..</div>
  <div >..</div>
  <div >..</div>
  <div >..</div>
  <div >..</div>
</div>

Css

.grid-container {
  display: grid;
  grid-template-columns: repeat(7, 100px) 
}

CodePudding user response：

you can also use flexbox to calculate the full with and then divide the space between: https://css-tricks.com/snippets/css/a-guide-to-flexbox/