0
私はちょうどページ上にこのグリッドを配置する方法を理解しようとしています - 私はこの白いスペースを左と下に、どこから来ているか分かりません。私はCSSと関連するグリッドコードをたくさん含んでいます。外部スタイルシートもありますが、これには何かがある可能性がありますが、私はそれを超えてしまい、そうは思わないようにしています。誰がこれを引き起こしているのか知っていますか？私は間違ってグリッドを設計し、何とか2番目の列にスキップするか、このマージンスペースですか？ちょうどその周りに均等にマージンを置いて、グリッドを幾分中心に合わせようとしています。申し訳ありませんが、私は何かフォーマットに賢明でないか、あまりにも多くのコードを投稿した - しばらく（4時間の睡眠で動いている）投稿していません。ありがとう。CSSグリッドを中央に配置するにはどうすればよいですか？
<style>
html {
overflow: hidden;
height: 100%;
}
p {
text-indent: 50px;
font-size: 200px;
color: white;
font-family:'y14.5m-20092009';
}
body {
-webkit-font-smoothing: antialiased;
background-color: white;
overflow: auto;
margin: 0px;
}
div#furtheroptions {
font-size: 30px;
color: white;
}
.hidden {
display: none;
}
div#fixedfooter {
position:fixed;
bottom:0px;
left:0px;
width:100%;
color: #ba2337;
background:#333;
padding:8px;
font-family:'y14.5m-20092009';
font-size: 20px;
text-align: center;
}
input[type=text] {
width: 400px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
color: #ba2337;
}
button {
text-align: center;
border: 1px solid white !important;
border-radius: 5px;
outline: none; /*keeps blue selection border off*/
}
.navigationbuttons {
display: grid;
grid-gap: 10px;
background-color: white;
color: #ba2337;
width: 100%;
font-family:'y14.5m-20092009';
margin-right: 100px;
}
.box {
background-color: #ba2337;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a {
grid-column: col/span 4;
grid-row: row/span 3;
}
.b {
grid-column: col/span 4;
grid-row: row 4/span 3;
}
.c {
grid-column: col/span 1;
grid-row: row 7;
}
.d {
grid-column: col 2/span 2;
grid-row: row 7;
}
.e {
grid-column: col 4;
grid-row: row 7;
}
.f {
grid-column: col/span 1;
grid-row: row 8/span 1;
}
.g {
grid-column: col 2/ span 2;
grid-row: row 8/span 1;
}
.h {
grid-column: col 4 /span 1;
grid-row: row 8/span 1;
}
.i {
grid-column: col 1/ span 2;
grid-row: row 9/span 3;
}
.j {
grid-column: col 3 /span 2;
grid-row: row 9/span 3;
}
</style>
</head>
<body>
<form>
<div class="navigationbuttons">
<div class="box a">A</div>
<div class="box b"><font size=300px>B</font></div>
<div class="box c">C</div>
<div class="box d"><font size=5>D</font></div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g" style="text-align: center"><input type="text" name="search" placeholder="Search.."></div>
<div class="box h"><button type="button" class="button" onclick="location.href = 'http://www.google.com';"</button>Button 1</div>
<div class="box i"><button type="button" class="button" onclick="location.href = 'http://www.google.com';"</button>Button 2</div>
<div class="box j"><button type="button" class="button" onclick="location.href = 'http://www.google.com';"</button>Button 3</div>
</form>
</div>
私はあなたを得ていませんでした。あなたは少し説明できますか？正確に何を探しているのですか？ –
"left"は 'display：grid'から来ます。 –
@PatrickMlrなぜですか？ – supthepunks