4-up Grid Block

Developer
Michael MartinSmucker
Size
2,213 Kb
Views
18,216
  1. 4-up Grid Block Previews
  2. 4-up Grid Block HTML Codes
  3. 4-up Grid Block CSS Codes
  4. 4-up Grid Block JS Codes

How do I make an 4-up grid block?

A list of objects that eventually scales up to 4-columns. What is a 4-up grid block? How do you make a 4-up grid block? This script and codes were developed by Michael MartinSmucker on 28 September 2022, Wednesday.

4-up Grid Block Previews
IQ Test

4-up Grid Block - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>4-up Grid Block</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel='stylesheet prefetch' href='https://bradfrost.github.com/this-is-responsive/styles.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--Pattern HTML--> <section id="pattern" class="pattern"> <ul class="grid">	<li>	<div>	<a href="#">1</a>	</div>	</li>	<li>	<div>	<a href="#">2</a>	</div>	</li>	<li>	<div>	<a href="#">3</a>	</div>	</li>	<li>	<div>	<a href="#">4</a>	</div>	</li>	<li>	<div>	<a href="#">5</a>	</div>	</li>	<li>	<div>	<a href="#">6</a>	</div>	</li>	<li>	<div>	<a href="#">7</a>	</div>	</li>	<li>	<div>	<a href="#">8</a>	</div>	</li>	<li>	<div>	<a href="#">9</a>	</div>	</li>	<li>	<div>	<a href="#">10</a>	</div>	</li>	<li>	<div>	<a href="#">11</a>	</div>	</li>	<li>	<div>	<a href="#">12</a>	</div>	</li>	</ul>	</section>	<div class="container">	<section class="pattern-description">	<h1>4-up Grid Block</h1>	<p>A list of objects that eventually scales up to 4-columns</p>	</section>	<footer role="contentinfo">	<div>	<nav id="menu">	<a href="https://bradfrost.github.com/this-is-responsive/patterns.html">&larr;More Responsive Patterns</a>	</nav>	</div>	</footer>	</div> <script src="js/index.js"></script>
</body>
</html>

4-up Grid Block - Script Codes CSS Codes

.grid { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; padding: 0.5em 0 0 0.5em; max-width: 76em; margin: 0 auto;
}
.grid li { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 16em; padding: 0 0.5em 0.5em 0;
}
.grid li > div { background: #808080; padding: 7em 2em; text-align: center;
}
.grid li a { color: #fff;
}

4-up Grid Block - Script Codes JS Codes

// a flexbox variation of bradfrost's pen:
// https://codepen.io/bradfrost/pen/LuAet
// obviously the practical value of this
// is pretty low, since no mobile browsers
// support the latest flexbox spec...
4-up Grid Block - Script Codes
4-up Grid Block - Script Codes
Home Page Home
Developer Michael MartinSmucker
Username mlms13
Uploaded September 28, 2022
Rating 3
Size 2,213 Kb
Views 18,216
Do you need developer help for 4-up Grid Block?

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!

Michael MartinSmucker (mlms13) Script Codes
Name
Sticker Tiles
CSS Floppy Disk Icon
Responsive nav collapses to a button
Toolbar Mockup
Chrome half-pixel bug
Simple Breadcrumbs
FancyArea Demo
Buttons for BEARS
Magic Color Picker
Panel Slider
Create amazing captions 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!