Flexible Grid
How do I make an flexible grid?
What is a flexible grid? How do you make a flexible grid? This script and codes were developed by Shay Howe on 12 July 2022, Tuesday.
Flexible Grid - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexible Grid</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> <h1>100% Wide Container</h1>
<div class="container"> <section>Section</section> <aside>Aside</aside>
</div>
<h1>75% Wide Container</h1>
<div class="container container-75"> <section>Section</section> <aside>Aside</aside>
</div>
<h1>50% Wide Container</h1>
<div class="container container-50"> <section>Section</section> <aside>Aside</aside>
</div>
</body>
</html>
Flexible Grid - Script Codes CSS Codes
body { font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
h1 { color: #9799a7; font-size: 14px; font-weight: bold; margin-bottom: 6px;
}
.container:before,
.container:after { content: ""; display: table;
}
.container:after { clear: both;
}
.container { background: #eaeaed; margin-bottom: 24px; *zoom: 1;
}
.container-75 { width: 75%;
}
.container-50 { margin-bottom: 0; width: 50%;
}
.container,
section,
aside { border-radius: 6px;
}
section,
aside { background: #2db34a; color: #fff; margin: 1.858736059%; padding: 20px 0; text-align: center;
}
section { float: left; width: 63.197026%;
}
aside { float: right; width: 29.3680297%;
}
Developer | Shay Howe |
Username | shayhowe |
Uploaded | July 12, 2022 |
Rating | 3 |
Size | 1,815 Kb |
Views | 50,600 |
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 |
Adding Images | 1,469 Kb |
Transition Property | 1,653 Kb |
Card Flip | 1,850 Kb |
HTML Document Structure | 1,403 Kb |
Sibling Selectors | 1,888 Kb |
Animations Keyframes | 1,611 Kb |
Three-column Layout with Floats | 1,678 Kb |
Fixed Grid | 1,688 Kb |
Login Form | 1,951 Kb |
Layout with Contained Floats | 1,822 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 |
404 Page | Saransh | 2,666 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
Html5-canvas-snow-effect | MariamMassadeh | 2,609 Kb |
Pure CSS Tooltip | APinix | 2,815 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Table border-collapse property | Maxds | 1,672 Kb |
GLSL Hills | Ykob | 6,991 Kb |
Polygon Logo in CSS | Kai | 3,412 Kb |
Arrow Navigation | Hinducows | 1,973 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!