How grid auto-fill and auto-fit works. auto-fill will make sure that the grid items (children) will retain their width and not stretch to fill up its parent element. On the other hand, auto-fit will make the grid-items to use up all the space of its the parent element.
A Pen by Stan Williams on CodePen.
| <h1>Grid 'auto-fill' vs 'auto-fit'</h1> | |
| <p class="sub-text"> Resize the screen to see the difference.</p> | |
| <h2> auto-fill: Grid items won't expand even if there is available space. </h2> | |
| <p class="code">grid-template-columns: repeat(auto-fill, minmax(300px,1fr));</p> | |
| <div class="grid grid--fill"> | |
| <div class="grid__child"> | |
| <img src="https://images.unsplash.com/photo-1498654896293-37aacf113fd9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Korean side dishes"> | |
| <div class="text"> | |
| <div class="timing"> | |
| <span class="ma-day">14 Dec</span> | |
| <span>12:00 PM - 5:00 PM</span> | |
| </div> | |
| <h3>Beginner Korean cooking class with Ms. Lee</h3> | |
| <div class="location" title="Busan, Korea"> | |
| <span class="svg-wrapper" aria-hidden="true" focusable="false"> | |
| <svg viewBox="0 0 512 512"><path d="m407.579 87.677c-31.073-53.624-86.265-86.385-147.64-87.637-2.62-.054-5.257-.054-7.878 0-61.374 1.252-116.566 34.013-147.64 87.637-31.762 54.812-32.631 120.652-2.325 176.123l126.963 232.387c.057.103.114.206.173.308 5.586 9.709 15.593 15.505 26.77 15.505 11.176 0 21.183-5.797 26.768-15.505.059-.102.116-.205.173-.308l126.963-232.387c30.304-55.471 29.435-121.311-2.327-176.123zm-151.579 144.323c-39.701 0-72-32.299-72-72s32.299-72 72-72 72 32.299 72 72-32.298 72-72 72z"></path></svg> | |
| </span> | |
| <span>Busan, Korea</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid__child"> | |
| <img src="https://images.unsplash.com/photo-1488992783499-418eb1f62d08?ixlib=rb-1.2.1&auto=format&fit=crop&w=1153&q=80"> | |
| <div class="text"> | |
| <div class="timing"> | |
| <span class="ma-day">14 Dec</span> | |
| <span>12:00 PM - 5:00 PM</span> | |
| </div> | |
| <h3>Food Plating: Learn easy food presentation and plating techniques</h3> | |
| <div class="location"> | |
| <span class="svg-wrapper online" aria-hidden="true" focusable="false"> | |
| <svg viewBox="0 0 512 512"><path d="m407.579 87.677c-31.073-53.624-86.265-86.385-147.64-87.637-2.62-.054-5.257-.054-7.878 0-61.374 1.252-116.566 34.013-147.64 87.637-31.762 54.812-32.631 120.652-2.325 176.123l126.963 232.387c.057.103.114.206.173.308 5.586 9.709 15.593 15.505 26.77 15.505 11.176 0 21.183-5.797 26.768-15.505.059-.102.116-.205.173-.308l126.963-232.387c30.304-55.471 29.435-121.311-2.327-176.123zm-151.579 144.323c-39.701 0-72-32.299-72-72s32.299-72 72-72 72 32.299 72 72-32.298 72-72 72z"></path></svg> | |
| </span> | |
| <span>Venice</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- auto-fit --> | |
| <h2> auto-fit: Grid items expand to take up all the available space of it's parent.</h2> | |
| <p class="code">grid-template-columns: repeat(auto-fit, minmax(300px,1fr));</p> | |
| <div class="grid grid--fit"> | |
| <div class="grid__child"> | |
| <img src="https://mahina.b-cdn.net/media/6.jpg?width=400&auto_optimize=high" alt="Korean side dishes"> | |
| <div class="text"> | |
| <div class="timing"> | |
| <span class="ma-day">14 Dec</span> | |
| <span>12:00 PM - 5:00 PM</span> | |
| </div> | |
| <h3>Beginner Korean cooking class with Ms. Lee</h3> | |
| <div class="location" title="Busan, Korea"> | |
| <span class="svg-wrapper " aria-hidden="true" focusable="false"> | |
| <svg viewBox="0 0 512 512"><path d="m407.579 87.677c-31.073-53.624-86.265-86.385-147.64-87.637-2.62-.054-5.257-.054-7.878 0-61.374 1.252-116.566 34.013-147.64 87.637-31.762 54.812-32.631 120.652-2.325 176.123l126.963 232.387c.057.103.114.206.173.308 5.586 9.709 15.593 15.505 26.77 15.505 11.176 0 21.183-5.797 26.768-15.505.059-.102.116-.205.173-.308l126.963-232.387c30.304-55.471 29.435-121.311-2.327-176.123zm-151.579 144.323c-39.701 0-72-32.299-72-72s32.299-72 72-72 72 32.299 72 72-32.298 72-72 72z"></path></svg> | |
| </span> | |
| <span>Busan, Korea</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid__child"> | |
| <img src="https://images.unsplash.com/photo-1488992783499-418eb1f62d08?ixlib=rb-1.2.1&auto=format&fit=crop&w=1153&q=80"> | |
| <div class="text"> | |
| <div class="timing"> | |
| <span class="ma-day">14 Dec</span> | |
| <span>12:00 PM - 5:00 PM</span> | |
| </div> | |
| <h3>Food Plating: Learn easy food presentation and plating techniques</h3> | |
| <div class="location"> | |
| <span class="svg-wrapper online" aria-hidden="true" focusable="false"> | |
| <svg viewBox="0 0 512 512"><path d="m407.579 87.677c-31.073-53.624-86.265-86.385-147.64-87.637-2.62-.054-5.257-.054-7.878 0-61.374 1.252-116.566 34.013-147.64 87.637-31.762 54.812-32.631 120.652-2.325 176.123l126.963 232.387c.057.103.114.206.173.308 5.586 9.709 15.593 15.505 26.77 15.505 11.176 0 21.183-5.797 26.768-15.505.059-.102.116-.205.173-.308l126.963-232.387c30.304-55.471 29.435-121.311-2.327-176.123zm-151.579 144.323c-39.701 0-72-32.299-72-72s32.299-72 72-72 72 32.299 72 72-32.298 72-72 72z"></path></svg> | |
| </span> | |
| <span>Venice</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
| .grid{ | |
| display: grid; | |
| grid-gap: 1.5rem; | |
| } | |
| // grid auto-fill | |
| .grid--fill{ | |
| -ms-grid-columns: (minmax(303px,1fr))[auto-fill]; | |
| grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); | |
| margin-bottom: 2rem; | |
| padding-bottom: 3rem; | |
| border-bottom: 1px solid #8c8fa6; | |
| } | |
| // grid auto-fit | |
| .grid--fit{ | |
| -ms-grid-columns: (minmax(303px,1fr))[auto-fit]; | |
| grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); | |
| } | |
| // Decoration CSS | |
| .grid__child{ | |
| background: #1b2036; | |
| border: 1px solid #dcdcdc00; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| } | |
| .text{ | |
| padding: 1rem; | |
| } | |
| .timing{ | |
| color: #b6c5e7; | |
| font-size: .9rem; | |
| text-transform: uppercase; | |
| span:first-child{ | |
| margin-right: .5rem; | |
| } | |
| } | |
| h2{ | |
| font-size: 1rem; | |
| font-weight: 500; | |
| margin-bottom: 1rem; | |
| text-align: center; | |
| } | |
| h3{ | |
| margin-bottom: .75rem; | |
| margin-top: .75rem; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| } | |
| .grid--fill img{ | |
| height: 200px; | |
| } | |
| .grid--fit img{ | |
| height: 300px; | |
| } | |
| img{ | |
| width: 100%; | |
| object-fit: cover; | |
| text-transform: uppercase; | |
| } | |
| .location{ | |
| font-size: .9rem; | |
| text-transform: capitalize; | |
| display: -webkit-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| color: #b6c5e7; | |
| } | |
| .svg-wrapper { | |
| width: 12px; | |
| height: 12px; | |
| margin-right: .25rem; | |
| opacity: .8; | |
| fill: #b6c5e7; | |
| verticle-align: middle; | |
| svg{ | |
| display: inherit; | |
| } | |
| } | |
| h1{ | |
| color: #dbe1fe; | |
| font-size: 1.5rem; | |
| text-align: center; | |
| font-weight: 500; | |
| } | |
| p.sub-text{ | |
| margin-bottom: 5rem; | |
| text-align: center; | |
| } | |
| .code{ | |
| border-radius: 5px; | |
| background: white; | |
| padding: .8rem; | |
| text-align: center; | |
| color: #252162; | |
| width: 80%; | |
| margin: 0 auto 1rem; | |
| } | |
| body{ | |
| background: #0e0e0e; | |
| padding: 2rem; | |
| font-family: 'Poppins', sans-serif; | |
| color: #eaf1ff; | |
| line-height: 1.5; | |
| } | |
| @media screen and (max-width: 350px){ | |
| .grid{ | |
| display: block; | |
| .grid__child{ | |
| margin-bottom: 1rem; | |
| } | |
| } | |
| } |
Demo or Fork: https://codepen.io/Stanssongs/pen/QWERzoN