Grid - Auto-fit demo

Developer
Chris Wright
Size
3,128 Kb
Views
44,528
  1. Grid - Auto-fit demo Previews
  2. Grid - Auto-fit demo HTML Codes
  3. Grid - Auto-fit demo CSS Codes

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 Previews
IQ Test

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%;
}
Grid - Auto-fit demo - Script Codes
Grid - Auto-fit demo - Script Codes
Home Page Home
Developer Chris Wright
Username chriswrightdesign
Uploaded August 12, 2022
Rating 3
Size 3,128 Kb
Views 44,528
Do you need developer help for Grid - Auto-fit demo?

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!

Chris Wright (chriswrightdesign) Script Codes
Name
Grid - two columns with gutters
IPhone SVG
SVG Noise over gradient Experiment
Macbook Air SVG
Bouncing ball arc horizontal
Reverse cascade
SVG iMac
Experiments with nth-of-type animation
Timeline animation
Typography SVG experiment
Create amazing sales emails with AI!

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!