css-cols
Version:
CSS grid.
76 lines (72 loc) • 2.94 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Cols by WPTom.com</title>
<link rel="stylesheet" href="css/main.min.css">
<link rel="stylesheet" href="css/demo.min.css">
</head>
<body>
<div class="container demo">
<h1>CSS Cols</h1>
<h2>The same sizes of columns - all devices <i>including</i> mobile</h2>
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="content-align-center">
<iframe src="https://carbon.now.sh/embed/XVCDj5HDCfSd6kUscYos"
style="width: 680px; height: 340px; border:0; transform: scale(1); overflow: auto;"
sandbox="allow-scripts allow-same-origin">
</iframe>
</div>
<h2>Various sizes of columns - all devices <i>including</i> mobile</h2>
<div class="row">
<div class="col col-3">col-3</div>
<div class="col col-4">col-4</div>
<div class="col col-5">col-5</div>
</div>
<div class="content-align-center">
<iframe src="https://carbon.now.sh/embed/P0rOpirEGJfdDWYMMvFm"
style="width: 680px; height: 340px; border:0; transform: scale(1); overflow: auto;"
sandbox="allow-scripts allow-same-origin">
</iframe>
</div>
<h2>Various sizes of columns - across all devices <i>except</i> mobile. Mobile remains 100%.</h2>
<div class="row">
<div class="col col-12 col-4-tablet-up">col-12 col-4-tablet-up</div>
<div class="col col-12 col-8-tablet-up">col-12 col-8-tablet-up</div>
</div>
<div class="content-align-center">
<iframe src="https://carbon.now.sh/embed/45IwXgauao7x426rxayV"
style="width: 930px; height: 340px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
</div>
<h2>Push & pull columns</h2>
<div class="row">
<div class="col col-6 push-1-desktop-up">col-6 push-1-desktop-up</div>
<div class="col col-6 pull-2-desktop-up">col-6 pull-2-desktop-up</div>
</div>
<div class="content-align-center">
<iframe src="https://carbon.now.sh/embed/4NyvFRvpHhhQ8JI9M9dS"
style="width: 930px; height: 340px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col col-12">
<p>© 2022 <a href="https://wptom.com">WPTom.com</a> under MIT license.</p>
</div>
</div>
</div>
</div>
</body>
</html>