网格布局
------------恢复内容开始------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.wrapper {
display: grid;
grid-template-columns:70% 30% ;
}
.wrapper>div {
background-color: #eee;
padding: 1rem;
}
.wrapper>diV:nth-child(odd) {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="wrapper">
<div>lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
necessitatibus alias et quofugit，nulla doloribus explicabo asperiores optio soluta non!Reiciendis ipsam
totam laudantium doloribus inventoreiste hic atque necessitatibus id labore libero dicta voluptate
cum，iure provident nesciunt enim maxime distinctiovelit tempora! A cumque maxime voluptatem iste vero
commodi， consequatur at veritatis，facilis minus quibusdamperspiciatis rem! Ad.R</div>
<div>
lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
</div>
<div>lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
necessitatibus alias et quofugit，nulla doloribus explicabo asperiores optio soluta non!Reiciendis ipsam
totam laudantium doloribus inventoreiste hic atque necessitatibus id labore libero dicta voluptate
cum，iure provident nesciunt enim maxime distinctiovelit tempora! A cumque maxime voluptatem iste vero
commodi， consequatur at veritatis，facilis minus quibusdamperspiciatis rem! Ad.R</div>
<div>
lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
</div>
<div>lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
necessitatibus alias et quofugit，nulla doloribus explicabo asperiores optio soluta non!Reiciendis ipsam
totam laudantium doloribus inventoreiste hic atque necessitatibus id labore libero dicta voluptate
cum，iure provident nesciunt enim maxime distinctiovelit tempora! A cumque maxime voluptatem iste vero
commodi， consequatur at veritatis，facilis minus quibusdamperspiciatis rem! Ad.R</div>
<div>
lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
</div>
<div>lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
necessitatibus alias et quofugit，nulla doloribus explicabo asperiores optio soluta non!Reiciendis ipsam
totam laudantium doloribus inventoreiste hic atque necessitatibus id labore libero dicta voluptate
cum，iure provident nesciunt enim maxime distinctiovelit tempora! A cumque maxime voluptatem iste vero
commodi， consequatur at veritatis，facilis minus quibusdamperspiciatis rem! Ad.R</div>
<div>
lLorem ipsum dolor sit amet consectetur adipisicing elit.Cum corrupti pariatur facilis ut laborum
quam，ea oditneque non nam repellat eveniet consequatur tempora velit asperiores rerum? Quibusdam
</div>
</div>
</body>
</html>
------------恢复内容结束------------
