this content was originally posted here.

css grid for layouts and how to use it

Note: Added version 2 of this with no rows for the grid css grid for layouts with no rows

so there is this thing called the CSS Grid Layout, and apparently we dont need a framework for grids anymore. (yay!)

just wanted to test and see how it would work for a normal layout, like main area content with a side nav or side bar.

also added some media queries to make it stack at 1024px but you can change this to any width really for super easy responsive layout.

Side Note: this does not work as a grid on IE11 when tested, it just stacks. So if you are worried about support for IE then maybe this grid is not for you.

example

example link

code

<!DOCTYPE html>
<html>
<head>
	<title>Using CSS Grid for a Layout</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://kruxor.com/code/css/css/margin-padding.css">
	<style>
		.grid-12 {
		  display: grid;
		  grid-template-columns: repeat(12, 1fr);
		  grid-template-rows: auto;
		  grid-gap: 10px 10px;
		}	
		.span-1 { grid-column: span 1; }	
		.span-2 { grid-column: span 2; }	
		.span-3 { grid-column: span 3; }	
		.span-4 { grid-column: span 4; }	
		.span-5 { grid-column: span 5; }	
		.span-6 { grid-column: span 6; }	
		.span-7 { grid-column: span 7; }	
		.span-8 { grid-column: span 8; }	
		.span-9 { grid-column: span 9; }	
		.span-10 { grid-column: span 10; }	
		.span-11 { grid-column: span 11; }	
		.span-12 { grid-column: span 12; }	
		/* Pick a responsive breakpoint for the grid to stack */
		@media(max-width:1024px) {
			.grid-12 {
			  display: block;
			}
			/* add some padding or margin to the spans when they stack */
			.span-1,
			.span-2,
			.span-3,
			.span-4,
			.span-5,
			.span-6,
			.span-7,
			.span-8,
			.span-9,
			.span-10,
			.span-11,
			.span-12 {
				margin-bottom:10px;
			}
		}
	</style>
</head>
<body>

<div class="wrap">
	<div class="grid-12">
		<div class='span-12 bglg p20 mb10'>a header (probably does not need to be in a grid)</div>
	</div>
	<div class="grid-12 mb10">
		<div class='span-9 bglg p20'>span-9</div>
		<div class='span-3 bglg p20'>span-3</div>
	</div>
	<div class="grid-12 mb10">
		<div class='span-3 bglg p20'>span-3</div>
		<div class='span-9 bglg p20'>span-9</div>
	</div>
	<div class="grid-12">
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
	</div>
</div>


</body>
</html>

Demo

database file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/db.db
comments_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/comments.db ($db_comments)
views_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/views.db
$dbfood_file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/food.db
db_linx: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/linx/db/db.db
Classes Loaded:
class/answers.class.php
class/code.class.php
class/comments.class.php
class/content.class.php
class/core.class.php
class/crud.class.php
class/crumbs.class.php
class/featured.class.php
class/food.class.php
class/functions.class.php
class/images.class.php
class/import.class.php
class/links.class.php
class/questions.class.php
class/template.class.php
class/tv.class.php
class/user.class.php
class/utilities.class.php
class/views.class.php
class/widget.class.php
Class Extend Loaded: class/extends/expenses.extend.php
Class Extend Loaded: class/extends/gary_cummins_timeline.extend.php
Class Extend Loaded: class/extends/moo.extend.php
Class Extend Loaded: class/extends/osrs_item_data.extend.php
Class Extend Loaded: class/extends/osrs_slayer.extend.php
Class Extend Loaded: class/extends/osrs_slayer_monsters.extend.php
Class Extend Loaded: class/extends/searches.extend.php
Core Database Connected: expenses.db
expenses add_to_menu:
Class Extend Auto Initialized as: expenses
Core Database Connected: gary_cummins_timeline.db
gary_cummins_timeline add_to_menu:
Class Extend Auto Initialized as: gary_cummins_timeline
Core Database Connected: moo.db
moo add_to_menu:
Class Extend Auto Initialized as: moo
Core Database Connected: osrs_item_data.db
osrs_item_data add_to_menu:
Class Extend Auto Initialized as: osrs_item_data
Core Database Connected: osrs_slayer.db
osrs_slayer add_to_menu:
Class Extend Auto Initialized as: osrs_slayer
Core Database Connected: osrs_slayer_monsters.db
osrs_slayer_monsters add_to_menu:
Class Extend Auto Initialized as: osrs_slayer_monsters
Core Database Connected: searches.db
searches add_to_menu:
Class Extend Auto Initialized as: searches
$user_logged_in:
user access level:
pages:
$p1:view
$p2:code
$p3:6EeM8
$p4:css-grid-for-layouts-and-how-to-use-it
$p5:
$p6:
$p:/view/code/6EeM8/css-grid-for-layouts-and-how-to-use-it/
Using Template: view-code.html