时间戳

首页 > 解决方案 > CSS 网格边距太大，我需要它们来缩放

html - CSS 网格边距太大，我需要它们来缩放

问题描述

我的代码包括 4 个框，它们应该连接到页面的 4 个角。我正在使用 CSS 网格布局。但是右边和底部的边距太大，我看不到这样做的代码。我有一个完成所有工作的 CSS 文件，以及一个由 CSS 文件操作的索引页面。如何让这个网格布局按比例缩放？

blocks.css--> 
 body {

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     display: grid;
     grid-template-columns: 8ch auto;
     grid-template-rows: 200px 200px;
     row-gap: 10px;       
}

/* blocks
#four
{
border-color: yellow;
border-style: solid;
border-width: 5px;
width: 25%;
text-align: center;
grid-column: 1 / 2;
grid-row: 2;
}
#three{
border-color: orange;
border-width: 5px;
border-style: solid;
width: 25%;
grid-column:  1/ 2;
grid-row: 1;    
}

#one{
border-color: blue;
border-style: solid;
border-width: 5px;
width: 25%;
grid-column: 2 / 2;
grid-row: 2;

}
#two {
 border-color: green;
 border-style: solid;
 border-width: 5px;
 text-align: center;
 vertical-align: top;
 width: 25%;
}
#link {
background-color: blue;
color: white;
text-align: center;
width: 25%;
}
index.htm-->-->index.htm--> 
<!DOCTYPE html>
<html>
<head>
  <title>Blocks</title>

  <link type="text/css" rel="stylesheet" href="blocks.css">
</head>
<body>
<div id="one">
Turns out you have a really fun time if you 
go to work every day and focus on being 
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence, 
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters 
fight fire, what do freedom fighters fight? They never 
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote
</a>
</p>
</body>
</html>

标签： htmlcss

解决方案

推荐阅读