如何设置嵌套网格？

Question

我是HTML CSS网格的新手。

我正在尝试设计类似的东西

Alpha Beta ----------搜索---------- Gamma

alpha，beta和gamma是按钮，搜索是搜索栏。

对于桌面视图（767像素），它工作得很好。>

但是当屏幕降到767px时，我想要这样的东西

-------搜索-------

Alpha Beta Gamma

但是由于它在网格中，所以我得到的输出像

Alpha Beta

----搜索----

伽玛

我的HTML代码

<div class="topdoubts">
        <div class="grid-container">
            <div class="intopdoubts">
                <div class="grid-container">
                    <div class="seminavbar">
                        <ul>
                            <li class="sectioncolor">
                                <div class="tabselection">Alpha</div>
                            </li>
                            <li>
                                <div class="tabselection">Beta</div>
                            </li>
                        </ul>
                    </div>
                    <div class="sbox">
                        <div id="focus-search" class="searcharea">
                            <input type="text" placeholder=" Search">
                            <div class="searchicon">
                                <i class="fas fa-search"></i>
                            </div>
                        </div>
                        <div id="focus-show" class="searchresultarea disnone"></div>
                    </div>
                </div>
            </div>
            <div class="addquecol">
                <a href="#">
                    <div class="gammas">
                        Gamma
                    </div>
                </a>
            </div>
        </div>
    </div>
我的CSS看起来像

.topdoubts .seminavbar {
    grid-area: myseminavbar;
}

.topdoubts .sbox {
    grid-area: mysbox;
}

.topdoubts .addquecol {
    grid-area: myaddquecol;
}
.intopdoubts {
    grid-area: myintopdoubts;
}
.topdoubts>.grid-container {
    display: grid;
    grid-template-columns: 80% max-content;
    grid-template-areas: 'myintopdoubts myaddquecol';
    grid-gap: 10px;
}
.intopdoubts>.grid-container {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-areas: 'myseminavbar mysbox';
    grid-gap: 10px;
}

@media screen and (max-width: 767px) {

    .intopdoubts>.grid-container {

        grid-template-columns: 100% max-content;
        grid-template-areas: 'mysbox mysbox' 'myseminavbar myaddquecol' ;
        grid-gap: 10px;
    }
    .topdoubts>.grid-container {
        display: block;
        grid-template-columns: 100% 100%;
        grid-template-areas: 'mysbox' 'myseminavbar myaddquecol ';
    }
}
为什么我要使用nestead网格？

因为Gamma下方还有另一个div，我希望gamma与该div具有相同的宽度。我也不想缩小Aplha的宽度，我只想缩小搜索栏和伽玛的宽度。

我乐于接受任何其他想法来使此功能生效。

我是HTML CSS网格的新手。我正在尝试设计类似Alpha Beta的东西----------搜索---------- Gamma alpha，beta和gamma是按钮，而search是一个搜索栏。它是...

Answer 1

您可能必须使用媒体查询来使网格响应屏幕宽度。