Use Flexbox like a pro
Learn CSS Flexbox with live examples and images.
Check it outrow-gap specifies the gap size between an element’s rows.
section { display: grid; row-gap: 30px; background-color: orange; margin: 10px; padding: 7px;}
div { background-color: purple; color: white; padding: 10px; border-radius: 5px;}
<section> <div>1</div> <div>2</div> <div>3</div> <div>4</div></section>
The snippet above used the row-gap
property to create a 30px
gap between the grid container’s rows.
section { width: 300px; display: flex; flex-wrap: wrap; row-gap: 40px; background-color: orange; margin: 10px; padding: 7px;}
div { background-color: purple; color: white; margin: 0 5px; padding: 30px; border-radius: 5px; flex-grow: 1;}
<section> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div></section>
The snippet above used the row-gap
property to create a 40px
gap between the flex container’s rows.