網格元素之間的多余空間CSS

Question

我正在嘗試創建一個包含3個大小不同的列的網頁。 大小是我想要的大小，但是最左邊的列和中間的列之間有一些不需要的空間。 這是jsfiddle： https ://jsfiddle.net/qme65unj/

我嘗試將填充，邊距等設置為0無濟於事。

我已經將最左邊的列的最大寬度調整為我想要的大小，但是它與中間列之間仍然留有空白。 我希望中間的列可以拉伸，也可以只是移動到左側列的右側旁邊。

  .grid-container { display: grid; grid-template-columns: auto auto auto; padding: 0; max-width: 1200px; margin: auto; } .coursesGridItem { background-color: red; padding: 0; margin: 0; text-align: left; max-width: 42.5%; grid-column-gap: 0; grid-row-gap: 0; } .assignmentGridItem { background-color: blue; padding: 0; max-width: 100%; text-align: left; grid-column-gap: 0; grid-row-gap: 0; margin: 0; } .upcomingGridItem { background-color: yellow; padding: 0; text-align: right; } .addCourseBtn { background-color: white; width: 125px; height: 45px; transition: 0.3s; font-size: 17px; border: none; border-radius: 25px; } .addCourseBtn:hover { background-color: #c95100; color: white; } 

  <div id="mainBodyRowStudent" class="grid-container"> <div class="coursesGridItem" style="border-right: 2px solid #c95100"> <h2>Courses</h2> <button id="addCourse" class="addCourseBtn">+ Add Course</button> </div> <div class="assignmentGridItem"> <h2>Assignments</h2> <h3>Current</h3> </div> <div class="upcomingGridItem"> <h2>Upcoming</h2> </div> </div> 

Answer 1

在.grid-container中，更改grid-template-columns: auto auto auto; grid-template-columns: 15% auto auto; 並從.coursesGridItem中刪除max-width: 42.5%