css [简单响应网格]简单响应网格系统#css #grid #responsive

Posted 2021-05-13

/* ==========================================================================
   GRID SYSTEM
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.row {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  margin-bottom: 0.5em;
}

.row [class^="col"] {
  float: left;
  margin: 0;
  margin-right: 1%;
}

.row [class^="col"]:last-child {
  margin-right: 0;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 100%;
}

.row::after {
	content: "";
	display: table;
	clear: both;
}

/*** Remove the following style and matching class from html ***/
.item {
  text-align: center;
  height: 50px;
  color: #000;
  background-color: #FFFF22;
  border: 1px solid #000;
  border-radius: 5px;  
}

/* ==========================================================================
   TAB STYLES
   ========================================================================== */

@media only screen and (min-width: 45em) {  /* 720px */

  .col-1 {
    width: 8.25%;
  }
  
  .col-2 {
    width: 16.5%;
  }
  
  .col-3 {
    width: 24.75%;
  }
  
  .col-4 {
    width: 33%;
  }
  
  .col-5 {
    width: 41.25%;
  }
  
  .col-6 {
    width: 49.5%;
  }
  
  .col-7 {
    width: 57.75%;
  }
  
  .col-8 {
    width: 66%;
  }
  
  .col-9 {
    width: 74.25%;
  }
  
  .col-10 {
    width: 82.5%;
  }
  
  .col-11 {
    width: 90.75%;
  }
  
  .col-12 {
    width: 100%;
  }
}

/* ==========================================================================
   DESKTOP STYLES
   ========================================================================== */

@media only screen and (min-width: 75em) { /* 1440px */
  .container {
    max-width: 90rem;
  }
}