Simple, 12 Column Grid

In this example below you will see how to do a Simple, 12 Column Grid with some HTML / CSS and Javascript

12 column grid written with SCSS functions to calculate widths.

Thumbnail
This awesome code was written by jlevinsohn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jlevinsohn ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Simple, 12 Column Grid</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  	<div class="show-grid">
		<div class="grid-block">
			<div class="col-12">12</div>
		</div>
		<div class="grid-block media-one-half">
			<div class="col-10">10</div>
			<div class="col-2">2</div>
		</div>
		<div class="grid-block media-one-half">
			<div class="col-8">8
				<div class="show-grid">
					<div class="grid-block media-full">
						<div class="col-12">12</div>
					</div>
				</div>
			</div>
			<div class="col-4">4</div>
		</div>
		<div class="grid-block media-one-third">
			<div class="col-7">7</div>
			<div class="col-3">3</div>
			<div class="col-2">2</div>
		</div>
		<div class="grid-block media-one-half">
			<div class="col-6">6</div>
			<div class="col-6">6</div>
		</div>
		<div class="grid-block media-one-third">
			<div class="col-4">4</div>
			<div class="col-4">4</div>
			<div class="col-4">4</div>
		</div>
		<div class="grid-block media-one-fourth">
			<div class="col-3">3</div>
			<div class="col-3">3</div>
			<div class="col-3">3</div>
			<div class="col-3">3</div>
		</div>
		<div class="grid-block media-full">
			<div class="col-1">1</div>
			<div class="col-1">1</div>
			<div class="col-1">1</div>
			<div class="col-1">1</div>
			<div class="col-1">1</div>
			<div class="col-1">1</div>
			<div class="col-1">1</div>
			<div class="col-1">1</div>
			<div class="col-1">1</div>
			<div class="col-1">1</div>
			<div class="col-1">1</div>
			<div class="col-1">1</div>
		</div>
		<div class="grid-block">
			<div class="col-8 center_col">Centered 8</div>
		</div>
	</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/jlevinsohn/simple-12-column-grid-ucryB */
body {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #666;
  font-size: 14px;
}

/* Number of desired columns. Everything else will be calculated. Yay math! */
/* Width of gutter between columns. */
/* DO NOT MODIFY - This is where the calculation happens. - DO NOT MODIFY */
/* Container for columns. Needs clearfix as cols are floated. */
/* Container for columns. Needs clearfix as cols are floated. */
.grid-block {
  *zoom: 1;
}
.grid-block:after {
  content: "";
  display: table;
  clear: both;
}

/* Container for columns. Needs clearfix as cols are floated. */
.col-1 {
  width: 6.5%;
}

.col-2 {
  width: 15%;
}

.col-3 {
  width: 23.5%;
}

.col-4 {
  width: 32%;
}

.col-5 {
  width: 40.5%;
}

.col-6 {
  width: 49%;
}

.col-7 {
  width: 57.5%;
}

.col-8 {
  width: 66%;
}

.col-9 {
  width: 74.5%;
}

.col-10 {
  width: 83%;
}

.col-11 {
  width: 91.5%;
}

.col-12 {
  width: 100%;
}

/* Styling for all columns, regardless of width. */
div[class^="col"] {
  float: left;
  margin-left: 2%;
}
div[class^="col"]:first-child {
  margin-left: auto;
}

/* Styling for all columns that will be centered. */
div[class*="center-col"],
div[class*="center_col"] {
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width: 1023px) {
  .media-one-half div[class^="col"] {
    width: 49%;
  }

  .media-one-third div[class^="col"] {
    width: 32%;
  }

  .media-one-fourth div[class^="col"] {
    width: 23.5%;
  }

  .media-full div[class^="col"] {
    width: 100%;
    float: none;
    margin: 2% auto auto auto;
  }
}
@media only screen and (max-width: 480px) {
  div[class*="media"] div[class^="col"] {
    width: 100%;
    float: none;
    margin: 2% auto auto auto;
  }
}
.show-grid div[class^="col"] {
  background-color: #ccc;
  margin-top: 2%;
  padding-top: 1%;
  padding-bottom: 1%;
  text-align: center;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.show-grid div[class^="col"] .show-grid div[class^="col"] {
  background-color: #efefef;
}

Comments