- Maximum of 3 columns in "web" layout, with 360px fixed width columns, 40px gutters and excess padding left and right. - 2 columns in "tablet" layout, with variable size columns and 24px gutters. - 1 columns in "phone" layout, with 16px gutters.
25 lines
760 B
HTML
25 lines
760 B
HTML
<!doctype html>
|
|
<html lang="">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Column Layout</title>
|
|
|
|
<link href="//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="demo.css">
|
|
</head>
|
|
<body>
|
|
<div class="column-layout">
|
|
<div>Each child</div>
|
|
<div>gets to be</div>
|
|
<div>an independent entity</div>
|
|
<div>to be placed in columns,</div>
|
|
<div>automatically.</div>
|
|
</div>
|
|
<script src="column-layout.js"></script>
|
|
</body>
|
|
</html>
|