css 简单网格 - http://j4n.co/blog/Creating-your-own-css-grid-system

Posted 2021-05-13

<div class="grid-container">
    <div class="row">
		<div class="col-1-6"><p>col-1-6</p></div>
		<div class="col-1-6"><p>col-1-6</p></div>
		<div class="col-1-6"><p>col-1-6</p></div>
		<div class="col-1-6"><p>col-1-6</p></div>
		<div class="col-1-6"><p>col-1-6</p></div>
		<div class="col-1-6"><p>col-1-6</p></div>
    </div>
    <div class="row">
        <div class="col-1-3"><p>col-1-3</p></div>
        <div class="col-1-3"><p>col-1-3</p></div>
        <div class="col-1-3"><p>col-1-3</p></div>
    </div>
    <div class="row">
        <div class="col-1-2"><p>col-1-2</p></div>
        <div class="col-1-2"><p>col-1-2</p></div>
    </div>
    <div class="row">
        <div class="col-2-3"><p>col-2-3</p></div>
        <div class="col-1-3"><p>col-1-3</p></div>
    </div>
    <div class="row">
        <div class="col-5-6"><p>col-5-6</p></div>
        <div class="col-1-6"><p>col-1-6</p></div>
    </div>
        <div class="row">
        <div class="col-1"><p>col-1</p></div>
    </div>
    <!--<div>
        <div class="row">
        <div class="col-1-6"><p>col-5-6</p></div>
        <div class="col-5-6"><p>col-1-6</p></div>
    </div>
        <div class="row">
        <div class="col-1-3"><p>col-2-3</p></div>
        <div class="col-2-3"><p>col-1-3</p></div>
    </div>-->
</div>

/* http://j4n.co/blog/Creating-your-own-css-grid-system */

/* ---------------------------------- */
/* ------------- Container ---------- */
/* ---------------------------------- */

.grid-container * {
	-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}
.grid-container {
	width: 100%;
	max-width: 1200px;
	margin:0 auto;
}

/* ---------------------------------- */
/* ------------- Styling ------------ */
/* ---------------------------------- */

[class*='col-'] > p {
    background-color: #f1f1f1;
    padding: 0;
    margin: 0;
    text-align: center;
    color: #666;
    font-family:open sans;
}

/* ---------------------------------- */
/* ---------------- Row ------------- */
/* ---------------------------------- */

/*-- cleafix hack -- */

.row {
	padding:12px;
}
.row:before, .row:after {
	content:"";
	display: table ;
	clear:both;
}

/* ---------------------------------- */
/* ------- Column Positioning ------- */
/* ---------------------------------- */

/* Prevent Empty Columns from stacking */

[class*='col-'] {
	float: left;
	min-height: 1px;
	width: 16.66%;
	padding: 12px;  /*-- our gutter --*/
}

/* Column Widths */

.col-1-6 { width: 16.66%;}  /* one sixth  */
.col-1-3 { width: 33.33%;}  /* one third */
.col-1-2 { width: 50%;}     /* half column */
.col-2-3 { width: 66.66%;}  /* two thirds */
.col-5-6 { width: 83.33%;}  /* five sixths */
.col-1 { width: 100%;}      /* one column */

/* ---------------------------------- */
/* --------- Media Queries ---------- */
/* ---------------------------------- */

/* iPad */

@media all and (max-width:950px) {

.col-1-6 { width: 33.33%;}
.col-1-3 { width: 50%;}
.col-1-2 { width: 100%;} /* 83.33% */
.col-2-3 { width: 100%;}
.col-5-6 { width: 100%;}
.col-1 { width: 100%;}

.row .col-1-3:last-of-type { width: 100%;}

.row .col-5 ~ .col-1-6 { width: 100%;}

/*.col-1-6:last-of-type { width:100%;}*/

}

/* iPhone */

@media all and (max-width:701px) {

.col-1-6 { width: 50%;}
.col-1-3 { width: 100%;}
.col-1-2 { width: 100%;}
.col-2-3 { width: 100%;}
.col-5-6 { width: 100%;}
.col-1 { width: 100%;}

}