leponceau.org

Programming And Stuff, You Know The Thing…

Non-trivial Simple-Grid CSS: dynamic css layout example that adjusts to mobiles

Posted at — Feb 20, 2019

Using CSS grids (in particular Simple-Grid) allows to naturally let a web page’s flow adjust to different screen geometries. The example here provides:

<!DOCTYPE html>
<html>
<head>
<title>Simple Grid Example: header and vertical content bar on
	the right</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../res/simple-grid.css" type="text/css" />
<style>
footer {
	font-size: small;
	margin-top: 2rem;
}

footer .row {
	border-top: dotted 1px grey;
}

footer .row [class^="col"] {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	line-height: 1;
}
</style>
</head>
<body>
	<header>
		<div class="container">
			<div class="row center">
				<div class="col-12">
					<h1>Simple-Grid Example</h1>
				</div>
			</div>
			<div class="row center">
				<div class="col-12">
					<h3>header and vertical content bar on the right</h3>
				</div>
			</div>
		</div>
	</header>
	<main>
	<div class="container">
		<div class="row">
			<div class="col-9">
				<div class="row">
					<div class="col-6 justify">1 The presentation of Trump’s
						presidency as a global—and domestic—crusade against socialism
						resurrected the kind of language that characterized not only
						McCarthyism, but the rise of fascism in the first half of the 20th
						century.</div>
					<div class="col-6">2 The presentation of Trump’s presidency
						as a global—and domestic—crusade against socialism resurrected the
						kind of language that characterized not only McCarthyism, but the
						rise of fascism in the first half of the 20th century.</div>
					<div class="col-12">3 The presentation of Trump’s presidency
						as a global—and domestic—crusade against socialism resurrected the
						kind of language that characterized not only</div>
					<div class="col-12">4 The presentation of Trump’s presidency
						as a global—and domestic—crusade against socialism resurrected the
						kind of language that characterized not only</div>
					<div class="col-6 right font-light">5 The presentation of
						Trump’s presidency as a global—and domestic—crusade against
						socialism resurrected the kind of language that characterized not
						only McCarthyism, but the rise of fascism in the first half of the
						20th century.</div>
					<div class="col-6">6 The presentation of Trump’s presidency
						as a global—and domestic—crusade against socialism resurrected the
						kind of language that characterized not only McCarthyism, but the
						rise of fascism in the first half of the 20th century.</div>
					<div class="col-6 center">7 The presentation of Trump’s
						presidency as a global—and domestic—crusade against socialism
						resurrected the kind of language that characterized not only
						McCarthyism, but the rise of fascism in the first half of the 20th
						century.</div>
					<div class="col-6 font-heavy">8 The presentation of Trump’s
						presidency as a global—and domestic—crusade against socialism
						resurrected the kind of language that characterized not only
						McCarthyism, but the rise of fascism in the first half of the 20th
						century.</div>
				</div>
			</div>
			<div class="col-3">
				<div class="row">
					<div class="col-12">
						(1) <em>This bar on the right will be appended to the end of
							the page in mobile mode.</em>
					</div>
					<div class="col-12">(2) The presentation of Trump’s
						presidency as a global—and domestic—crusade against socialism
						resurrected the kind of language that characterized not only
						McCarthyism, but the rise of fascism in the first half of the 20th
						century.</div>
					<div class="col-12">(3) The presentation of Trump’s
						presidency as a global—and domestic—crusade against socialism
						resurrected the kind of language that characterized not only
						McCarthyism, but the rise of fascism in the first half of the 20th
						century.</div>
				</div>
			</div>
		</div>
	</div>
	</main>
	<footer class="font-light">
		<div class="container">
			<div class="row">
				<div class="col-12">Footer line 1.</div>
			</div>
			<div class="row">
				<div class="col-4">Footer line 2.</div>
				<div class="col-4 center">Mid.</div>
				<div class="col-4 right">Right.</div>
			</div>
			<div class="row">
				<div class="col-12">Footer line 3.</div>
			</div>
		</div>
	</footer>
</body>
</html>