html - 在我的第一个 CSS 网格上工作。网格定位和对象重叠有问题

Question

标题解释了大部分内容。我想要一个覆盖页面底部 40% 的 3x2 网格。我似乎无法移动 div 并且对象重叠。

https://jsfiddle.net/draymon/r7538o2x/3/#&togetherjs=ymVMBJNyuV

    body,
    html {
        height: auto;
        width: auto;
    }

    div {
        position: relative;
        top: 50%;
    }
    .grid-container {
        display: grid;
        height: 40%;
        width: 100%;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(2, auto);
        position: relative;
    }
    .grid-item {
        border: 1px solid rgb(0, 0, 0);
        position: relative;
    }
    .content {
        position: absolute;
        top: 25%;
        left: 35%;
    }

Answer 1

我建议您看一下 flexbox，我发现它更容易使用。您可以在此处阅读更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

相信我，它比 css 网格简单多了

希望这能解决您的问题<3