Posted By

lookingforsome on 12/02/12


Tagged

css grid responsive


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

lookingforsome
bdario


Responsive Column Layouts


 / Published in: CSS
 

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

For responsive grid layouts

  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 -->

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: owengarner21 on December 28, 2017

There are no bounty serious ideas to look at in HTML until HTML5. You have to comprehend which tag is utilized for which square of the component. Structures are a couple of basic in the meantime as considering HTML Best Essay Writing Service UK.

You need to login to post a comment.