Grid - Auto-fit demo
How do I make an grid - auto-fit demo?
Demo for article: https://medium.com/@cwrightdesign/getting-to-know-css-grid-layout-818e43ca71a5. What is a grid - auto-fit demo? How do you make a grid - auto-fit demo? This script and codes were developed by Chris Wright on 12 August 2022, Friday.
Grid - Auto-fit demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Grid - Auto-fit demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="subscribe-form"> <h2 class="heading">Subscribe</h2> <div class="grid grid--gutter-small grid--auto-sizing"> <div class="grid grid__item"> <label for="firstName">First name</label> <input id="firstName" placeholder="Jake" class="input" type="text" /> </div> <div class="grid grid__item"> <label for="lastName">Last name</label> <input id="lastName" placeholder="the dog" class="input" type="text" /> </div> <div class="grid grid__item"> <label for="email">Email address</label> <input id="email" placeholder="[email protected]" class="input" type="text" /> </div> <div class="grid grid__item"> <button type="button" class="button">Subscribe</button> </div> </div> </div>
</div>
</body>
</html>
Grid - Auto-fit demo - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
* { box-sizing: border-box;
}
body { font-family: Roboto;
}
.container { height: 100vh; max-width: 1000px; padding: 1rem;
}
.subscribe-form { background: #323a45; padding: 2rem;
}
/* fallback styles */
.grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap;
}
.grid--gutter-small { margin-left: -1rem;
}
.grid__item { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; padding-left: 1rem; padding-bottom: 1rem; width: 200px;
}
/* end fallback styles */
@supports ((display: -ms-grid) or (display: grid)) { .grid { display: -ms-grid; display: grid; } /* resets */ .grid__item { padding: initial; width: auto; } .grid--gutter-small { margin: initial; }
}
.grid--gutter-small { grid-gap: 1rem;
}
.grid--auto-sizing { -ms-grid-columns: (minmax(200px, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.heading { color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.1rem; margin-bottom: 1rem; text-align: center; text-transform: uppercase;
}
.input { border: none; border-radius: 3px; display: block; font-size: 0.9rem; font-weight: 300; padding: 1rem; width: 100%;
}
label { color: #fff; margin-bottom: 0.5rem; font-weight: 300; font-size: 0.8rem;
}
.button { background: none; background-color: #ff3366; border: none; border-radius: 3px; color: #fff; cursor: pointer; font-size: 0.9rem; margin-top: auto; padding: 1rem; text-transform: uppercase; width: 100%;
}
Developer | Chris Wright |
Username | chriswrightdesign |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 3,128 Kb |
Views | 44,528 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS Responsive animated Accordion | 4,834 Kb |
SVG Reflection | 8,859 Kb |
Background Noisy Radial Gradient | 3,207 Kb |
SVG Noise blended radial | 2,946 Kb |
Grid - More complex grids with span | 3,695 Kb |
Typography SVG experiment | 3,472 Kb |
Macbook Air SVG | 11,283 Kb |
Grid - Row with minmax | 4,220 Kb |
Reverse cascade | 3,976 Kb |
Offscreen zoom nav | 5,205 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Playing with FlexBox | _Billy_Brown | 3,162 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
Side Sliding Menu CSS | EduardL | 4,388 Kb |
Tree growth tests | Orchard | 3,818 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Simple content swap | Snografx | 1,859 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Fullscreen audio play button | 72 | 2,148 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!