css Blockgrid for Foundation。为中型屏幕启用布局。注意：此网格中的中断点为600px而不是fo

Posted 2021-05-13

@media only screen{
  [class*="block-grid-"] {
  display:block;
	zoom:1;
	margin:0 -.625em;
	padding:0;
  }
  
  [class*="block-grid-"]:before,
  [class*="block-grid-"]:after {
	content:" ";
	display:table;
  }
  
  [class*="block-grid-"] > li {
	display:inline;
	height:auto;
	float:left;
	padding:0 .625em 1.25em;
  }

  /*
   * small
   * most mobile phones
   * */

  .small-block-grid-1 > li {
	width:100%;
	padding:0 .625em 1.25em;
  }

  .small-block-grid-2 > li {
	width:50%;
	padding:0 .625em 1.25em;
  }

  .small-block-grid-3 > li {
	width:33.33333%;
	padding:0 .625em 1.25em;
  }

  .small-block-grid-4 > li {
	width:25%;
	padding:0 .625em 1.25em;
  }

  .small-block-grid-5 > li {
	width:20%;
	padding:0 .625em 1.25em;
  }

  .small-block-grid-6 > li {
	width:16.66667%;
	padding:0 .625em 1.25em;
  }

  .small-block-grid-7 > li {
	width:14.28571%;
	padding:0 .625em 1.25em;
  }

  .small-block-grid-8 > li {
	width:12.5%;
	padding:0 .625em 1.25em;
  }

  .small-block-grid-9 > li {
	width:11.11111%;
	padding:0 .625em 1.25em;
  }

  .small-block-grid-10 > li {
	width:10%;
	padding:0 .625em 1.25em;
  }

  .small-block-grid-11 > li {
	width:9.09091%;
	padding:0 .625em 1.25em;
  }

  .small-block-grid-12 > li {
	width:8.33333%;
	padding:0 .625em 1.25em;
  }

  .small-block-grid-1 > li:nth-of-type(n),
  .small-block-grid-2 > li:nth-of-type(n),
  .small-block-grid-3 > li:nth-of-type(n),
  .small-block-grid-4 > li:nth-of-type(n),
  .small-block-grid-5 > li:nth-of-type(n),
  .small-block-grid-6 > li:nth-of-type(n),
  .small-block-grid-7 > li:nth-of-type(n),
  .small-block-grid-8 > li:nth-of-type(n),
  .small-block-grid-9 > li:nth-of-type(n),
  .small-block-grid-10 > li:nth-of-type(n),
  .small-block-grid-11 > li:nth-of-type(n),
  .small-block-grid-12 > li:nth-of-type(n) {
	clear:none;
  }

  [class*="block-grid-"]:after,
  .small-block-grid-1 > li:nth-of-type(1n+1),
  .small-block-grid-2 > li:nth-of-type(2n+1),
  .small-block-grid-3 > li:nth-of-type(3n+1),
  .small-block-grid-4 > li:nth-of-type(4n+1),
  .small-block-grid-5 > li:nth-of-type(5n+1),
  .small-block-grid-6 > li:nth-of-type(6n+1),
  .small-block-grid-7 > li:nth-of-type(7n+1),
  .small-block-grid-8 > li:nth-of-type(8n+1),
  .small-block-grid-9 > li:nth-of-type(9n+1),
  .small-block-grid-10 > li:nth-of-type(10n+1),
  .small-block-grid-11 > li:nth-of-type(11n+1),
  .small-block-grid-12 > li:nth-of-type(12n+1) {
	clear:both;
  }

}

@media only screen and (min-width: 600px) {
/*
Default breakpoint here:
@media only screen and (min-width: 640px) {
*/

  /*
   * medium 
   * most tablets in portrait mode
   * */

  .medium-block-grid-1 > li {
	width:100%;
	padding:0 .625em 1.25em;
  }

  .medium-block-grid-2 > li {
	width:50%;
	padding:0 .625em 1.25em;
  }

  .medium-block-grid-3 > li {
	width:33.33333%;
	padding:0 .625em 1.25em;
  }

  .medium-block-grid-4 > li {
	width:25%;
	padding:0 .625em 1.25em;
  }

  .medium-block-grid-5 > li {
	width:20%;
	padding:0 .625em 1.25em;
  }

  .medium-block-grid-6 > li {
	width:16.66667%;
	padding:0 .625em 1.25em;
  }

  .medium-block-grid-7 > li {
	width:14.28571%;
	padding:0 .625em 1.25em;
  }

  .medium-block-grid-8 > li {
	width:12.5%;
	padding:0 .625em 1.25em;
  }

  .medium-block-grid-9 > li {
	width:11.11111%;
	padding:0 .625em 1.25em;
  }

  .medium-block-grid-10 > li {
	width:10%;
	padding:0 .625em 1.25em;
  }

  .medium-block-grid-11 > li {
	width:9.09091%;
	padding:0 .625em 1.25em;
  }

  .medium-block-grid-12 > li {
	width:8.33333%;
	padding:0 .625em 1.25em;
  }

  .small-block-grid-1 > li:nth-of-type(1n+1),
  .small-block-grid-2 > li:nth-of-type(2n+1),
  .small-block-grid-3 > li:nth-of-type(3n+1),
  .small-block-grid-4 > li:nth-of-type(4n+1),
  .small-block-grid-5 > li:nth-of-type(5n+1),
  .small-block-grid-6 > li:nth-of-type(6n+1),
  .small-block-grid-7 > li:nth-of-type(7n+1),
  .small-block-grid-8 > li:nth-of-type(8n+1),
  .small-block-grid-9 > li:nth-of-type(9n+1),
  .small-block-grid-10 > li:nth-of-type(10n+1),
  .small-block-grid-11 > li:nth-of-type(11n+1),
  .small-block-grid-12 > li:nth-of-type(12n+1),
  .medium-block-grid-1 > li:nth-of-type(n),
  .medium-block-grid-2 > li:nth-of-type(n),
  .medium-block-grid-3 > li:nth-of-type(n),
  .medium-block-grid-4 > li:nth-of-type(n),
  .medium-block-grid-5 > li:nth-of-type(n),
  .medium-block-grid-6 > li:nth-of-type(n),
  .medium-block-grid-7 > li:nth-of-type(n),
  .medium-block-grid-8 > li:nth-of-type(n),
  .medium-block-grid-9 > li:nth-of-type(n),
  .medium-block-grid-10 > li:nth-of-type(n),
  .medium-block-grid-11 > li:nth-of-type(n),
  .medium-block-grid-12 > li:nth-of-type(n) {
  clear:none;
  }
  
  .medium-block-grid-1 > li:nth-of-type(1n+1),
  .medium-block-grid-2 > li:nth-of-type(2n+1),
  .medium-block-grid-3 > li:nth-of-type(3n+1),
  .medium-block-grid-4 > li:nth-of-type(4n+1),
  .medium-block-grid-5 > li:nth-of-type(5n+1),
  .medium-block-grid-6 > li:nth-of-type(6n+1),
  .medium-block-grid-7 > li:nth-of-type(7n+1),
  .medium-block-grid-8 > li:nth-of-type(8n+1),
  .medium-block-grid-9 > li:nth-of-type(9n+1),
  .medium-block-grid-10 > li:nth-of-type(10n+1),
  .medium-block-grid-11 > li:nth-of-type(11n+1),
  .medium-block-grid-12 > li:nth-of-type(12n+1) {
  clear:both;
  }

}

@media only screen and (min-width: 1024px) {
  
  /*
   * large
   * modx tablets in portrait mode, notebooks and desktops
   * */  
  
  .large-block-grid-1 > li {
	width:100%;
	padding:0 .625em 1.25em;
  }

  .large-block-grid-2 > li {
	width:50%;
	padding:0 .625em 1.25em;
  }
  
  .large-block-grid-3 > li {
	width:33.33333%;
	padding:0 .625em 1.25em;
  }
  
  .large-block-grid-4 > li {
	width:25%;
	padding:0 .625em 1.25em;
  }
  
  .large-block-grid-5 > li {
	width:20%;
	padding:0 .625em 1.25em;
  }
  
  .large-block-grid-6 > li {
	width:16.66667%;
	padding:0 .625em 1.25em;
  }
  
  .large-block-grid-7 > li {
	width:14.28571%;
	padding:0 .625em 1.25em;
  }
  
  .large-block-grid-8 > li {
	width:12.5%;
	padding:0 .625em 1.25em;
  }
  
  .large-block-grid-9 > li {
	width:11.11111%;
	padding:0 .625em 1.25em;
  }
  
  .large-block-grid-10 > li {
	width:10%;
	padding:0 .625em 1.25em;
  }
  
  .large-block-grid-11 > li {
	width:9.09091%;
	padding:0 .625em 1.25em;
  }
  
  .large-block-grid-12 > li {
	width:8.33333%;
	padding:0 .625em 1.25em;
  }
  
  .small-block-grid-1 > li:nth-of-type(1n+1),
  .small-block-grid-2 > li:nth-of-type(2n+1),
  .small-block-grid-3 > li:nth-of-type(3n+1),
  .small-block-grid-4 > li:nth-of-type(4n+1),
  .small-block-grid-5 > li:nth-of-type(5n+1),
  .small-block-grid-6 > li:nth-of-type(6n+1),
  .small-block-grid-7 > li:nth-of-type(7n+1),
  .small-block-grid-8 > li:nth-of-type(8n+1),
  .small-block-grid-9 > li:nth-of-type(9n+1),
  .small-block-grid-10 > li:nth-of-type(10n+1),
  .small-block-grid-11 > li:nth-of-type(11n+1),
  .small-block-grid-12 > li:nth-of-type(12n+1),
  .medium-block-grid-1 > li:nth-of-type(1n+1),
  .medium-block-grid-2 > li:nth-of-type(2n+1),
  .medium-block-grid-3 > li:nth-of-type(3n+1),
  .medium-block-grid-4 > li:nth-of-type(4n+1),
  .medium-block-grid-5 > li:nth-of-type(5n+1),
  .medium-block-grid-6 > li:nth-of-type(6n+1),
  .medium-block-grid-7 > li:nth-of-type(7n+1),
  .medium-block-grid-8 > li:nth-of-type(8n+1),
  .medium-block-grid-9 > li:nth-of-type(9n+1),
  .medium-block-grid-10 > li:nth-of-type(10n+1),
  .medium-block-grid-11 > li:nth-of-type(11n+1),
  .medium-block-grid-12 > li:nth-of-type(12n+1),
  .large-block-grid-1 > li:nth-of-type(n),
  .large-block-grid-2 > li:nth-of-type(n),
  .large-block-grid-3 > li:nth-of-type(n),
  .large-block-grid-4 > li:nth-of-type(n),
  .large-block-grid-5 > li:nth-of-type(n),
  .large-block-grid-6 > li:nth-of-type(n),
  .large-block-grid-7 > li:nth-of-type(n),
  .large-block-grid-8 > li:nth-of-type(n),
  .large-block-grid-9 > li:nth-of-type(n),
  .large-block-grid-10 > li:nth-of-type(n),
  .large-block-grid-11 > li:nth-of-type(n),
  .large-block-grid-12 > li:nth-of-type(n) {
  clear:none;
  }
  
  .large-block-grid-1 > li:nth-of-type(1n+1),
  .large-block-grid-2 > li:nth-of-type(2n+1),
  .large-block-grid-3 > li:nth-of-type(3n+1),
  .large-block-grid-4 > li:nth-of-type(4n+1),
  .large-block-grid-5 > li:nth-of-type(5n+1),
  .large-block-grid-6 > li:nth-of-type(6n+1),
  .large-block-grid-7 > li:nth-of-type(7n+1),
  .large-block-grid-8 > li:nth-of-type(8n+1),
  .large-block-grid-9 > li:nth-of-type(9n+1),
  .large-block-grid-10 > li:nth-of-type(10n+1),
  .large-block-grid-11 > li:nth-of-type(11n+1),
  .large-block-grid-12 > li:nth-of-type(12n+1) {
  clear:both;
  }
}