Advanced Search

Responsive Column Layouts

/ Published in: CSS
Save to your folder(s)
For responsive grid layouts

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. body {
  3. 	background: #fff;
  4. 	color: #666;
  5. 	font: 85%/140% Arial, Helvetica, sans-serif;
  6. 	width: 800px;
  7. 	max-width: 96%;
  8. 	margin: 0 auto;
  9. }
  10. a {
  11. 	color: #69C;
  12. 	text-decoration: none;
  13. }
  14. a:hover {
  15. 	color: #F60;
  16. }
  17. h1 {
  18. 	font: 1.7em;
  19. 	line-height: 110%;
  20. 	color: #000;
  21. }
  22. h1, h2, h3 {
  23. 	color: #000;
  24. }
  25. h3 {
  26. 	border-top: solid 1px #eee;
  27. 	padding: 20px 0;
  28. 	margin: 20px 0 0;
  29. 	font-size: 150%;
  30. }
  31. p {
  32. 	margin: 0 0 20px;
  33. }
  34.  
  35. /* set html5 elements to block */
  36. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
  37.     display: block;
  38. }
  39.  
  40. #pagewrap {
  41. 	width: 978px;
  42. 	max-width: 96%;
  43. 	margin: 0 auto;
  44. }
  45. .wrapper {
  46. 	overflow: hidden;
  47. }
  48.  
  49. /************************************************************************************
  50. COLUMN
  51. *************************************************************************************/
  52. .col {
  53. 	background: #eee;
  54. 	float: left;
  55. 	margin-left: 3.2%;
  56. 	margin-bottom: 30px;
  57. }
  58. .fullwidth .col {
  59. 	float: none;
  60. 	margin-left: 0;
  61. }
  62. /* grid4 col */
  63. .grid4 .col {
  64. 	width: 22.6%;
  65. }
  66. /* grid3 col */
  67. .grid3 .col {
  68. 	width: 31.2%;
  69. }
  70. /* grid2 col */
  71. .grid2 .col {
  72. 	width: 48.4%;
  73. }
  74. /* clear col */
  75. .grid4 .col:nth-of-type(4n+1),
  76. .grid3 .col:nth-of-type(3n+1),
  77. .grid2 .col:nth-of-type(2n+1) {
  78. 	margin-left: 0;
  79. 	clear: left;
  80. }
  81.  
  82. /************************************************************************************
  83. MEDIA QUERIES
  84. *************************************************************************************/
  85. /* reset cols to 3-column */
  86. @media screen and (max-width: 740px) {
  87. 	/* grid4 */
  88. 	.grid4 .col {
  89. 		width: 31.2%;
  90. 	}
  91. 	.grid4 .col:nth-of-type(4n+1) {
  92. 		margin-left: 3.2%;
  93. 		clear: none;
  94. 	}
  95. 	.grid4 .col:nth-of-type(3n+1) {
  96. 		margin-left: 0;
  97. 		clear: left;
  98. 	}
  99. }
  100.  
  101. /* reset cols to 2-column */
  102. @media screen and (max-width: 600px) {
  103. 	/* grid4 */
  104. 	.grid4 .col {
  105. 		width: 48.4%;
  106. 	}
  107. 	.grid4 .col:nth-of-type(3n+1) {
  108. 		margin-left: 3.2%;
  109. 		clear: none;
  110. 	}
  111. 	.grid4 .col:nth-of-type(2n+1) {
  112. 		margin-left: 0;
  113. 		clear: left;
  114. 	}
  115.  
  116. 	/* grid3 */
  117. 	.grid3 .col {
  118. 		width: 48.4%;
  119. 	}
  120. 	.grid3 .col:nth-of-type(3n+1) {
  121. 		margin-left: 3.2%;
  122. 		clear: none;
  123. 	}
  124. 	.grid3 .col:nth-of-type(2n+1) {
  125. 		margin-left: 0;
  126. 		clear: left;
  127. 	}
  128. }
  129.  
  130. /* reset cols to fullwidth */
  131. @media screen and (max-width: 400px) {
  132. 	/* grid4 */
  133. 	.col {
  134. 		width: 100% !important;
  135. 		margin-left: 0 !important;
  136. 		clear: none !important;
  137. 	}
  138. }
  139.  
  140.  
  141. </style>
  142.  
  143. <!--[if lt IE 9]>
  144. 	<script src="js/respond.js"></script>
  145. 	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  146. 	<script src="http://s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  147. 	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
  148. <![endif]-->
  149.  
  150. </head>
  151.  
  152. <body>
  153. <div id="pagewrap">
  154.  
  155. 	<h1>Demo: Responsive Column Layouts</h1>
  156. 	<p>Tutorial by <a href="http://twitter.com/nickla">Nick La</a>, <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-column-layouts">Responsive Column Layouts</a>)</p>
  157. 	<p>Resize your browser window to see the columns switch from 4 to 3, then to 2, and full width.</p>
  158.  
  159. 	<h3>Grid4</h3>
  160. 	<div class="wrapper grid4">
  161.  
  162. 		<article class="col">
  163. 			Column 1
  164. 		</article>
  165.  
  166. 		<article class="col">
  167. 			Column 2
  168. 		</article>
  169.  
  170. 		<article class="col">
  171. 			Column 3
  172. 		</article>
  173.  
  174. 		<article class="col">
  175. 			Column 4
  176. 		</article>
  177.  
  178. 		<article class="col">
  179. 			Column 5
  180. 		</article>
  181.  
  182. 		<article class="col">
  183. 			Column 6
  184. 		</article>
  185.  
  186. 		<article class="col">
  187. 			Column 7
  188. 		</article>
  189.  
  190. 		<article class="col">
  191. 			Column 8
  192. 		</article>
  193.  
  194. 	</div>
  195. 	<!-- /wrapper -->
  196.  
  197. 	<h3>Grid3</h3>
  198. 	<div class="wrapper grid3">
  199.  
  200. 		<article class="col">
  201. 			Column 1
  202. 		</article>
  203.  
  204. 		<article class="col">
  205. 			Column 2
  206. 		</article>
  207.  
  208. 		<article class="col">
  209. 			Column 3
  210. 		</article>
  211.  
  212. 		<article class="col">
  213. 			Column 4
  214. 		</article>
  215.  
  216. 		<article class="col">
  217. 			Column 5
  218. 		</article>
  219.  
  220. 		<article class="col">
  221. 			Column 6
  222. 		</article>
  223.  
  224. 	</div>
  225. 	<!-- /wrapper -->
  226.  
  227. 	<h3>Grid2</h3>
  228. 	<div class="wrapper grid2">
  229.  
  230. 		<article class="col">
  231. 			Column 1
  232. 		</article>
  233.  
  234. 		<article class="col">
  235. 			Column 2
  236. 		</article>
  237.  
  238. 		<article class="col">
  239. 			Column 3
  240. 		</article>
  241.  
  242. 		<article class="col">
  243. 			Column 4
  244. 		</article>
  245.  
  246. 	</div>
  247. 	<!-- /wrapper -->
  248.  
  249. 	<h3>Fullwidth</h3>
  250. 	<div class="wrapper fullwidth">
  251.  
  252. 		<article class="col">
  253. 			Column 1
  254. 		</article>
  255.  
  256. 	</div>
  257. 	<!-- /wrapper -->
  258.  
  259. </div>
  260. <!-- /wrapper -->

URL: http://webdesignerwall.com/tutorials/responsive-column-layouts

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.