<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3.1 实现栅格系统--基础部分</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
img {
width: 100%;
}
body {
padding-top: 100px;
}
[class*='col-'] {
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(86, 61, 124, 0.15);
border: 1px solid rgba(86, 61, 124, 0.2);
}
.row {
margin-bottom: 20px;
}
.container {
height: 500px;
background-color: #eee;
}
</style>
<link rel="stylesheet" href="css/grid.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">1</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">2</div>
<!-- <div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"><img src="img/2-1.jpg" alt="phone"></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"><img src="img/2-2.jpg" alt="phone"></div> -->
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">3</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">4</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">5</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">6</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">7</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">8</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">9</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">10</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">11</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">12</div>
</div>
<div class="row">
<div class="col-3">
<div class="row">
<div class="col-4">1-1</div>
<div class="col-4">1-2</div>
<div class="col-4">1-3</div>
</div>
</div>
<div class="col-3">2</div>
<div class="col-3">3</div>
<div class="col-3">4</div>
</div>
</div>
</body>
</html>
======================================================
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>5.1 实现栅格系统--基础部分</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
img {
width: 100%;
}
body {
padding-top: 100px;
}
[class*='col-'],
[class*='col'] {
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(86, 61, 124, 0.15);
border: 1px solid rgba(86, 61, 124, 0.2);
}
.row {
margin-bottom: 20px;
}
.container {
height: 500px;
background-color: #eee;
}
</style>
<link rel="stylesheet" href="css/grid-flex.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl">1</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl">2</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl">3</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl">4</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl">5</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl">6</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl">7</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl">8</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl">9</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl">10</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl">11</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl">12</div>
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col">1-1</div>
<div class="col">1-2</div>
<div class="col">1-3</div>
</div>
</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
</div>
</body>
</html>