网格元素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

In your .grid-container change grid-template-columns: auto auto auto; to grid-template-columns: 15% auto auto; and remove the max-width: 42.5% from .coursesGridItem