使用css Grid动态对齐同一行中的项目答案

【问题标题】：Align items in same rows dynamically using css Grid使用css Grid动态对齐同一行中的项目
【发布时间】：2020-11-30 13:28:30
【问题描述】：

我在尝试使以下示例正常工作时遇到了问题：Screen using Chrome debugger

我想将我的标题栏与我的地址对齐，事实上我希望地址从第 1 行开始。

这是我运行的简单代码：

CSS

#lawyerOfficeLinksContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.lawyerContract {
    grid-column: 1/2;
}

.lawyerDomiciliation{
    grid-column: 2/3;
}

HTML（使用 Razor）

<div id="lawyerOfficeLinksContainer">
        @foreach(var contract in Model.LawyerConsultModel.LawyerContractsList.Rows)
        {
            <text>
                <div class="lawyerContract">
                    <h3>Title</h3>
                    <div>
                        <b><label>Name :</label></b>
                        <span>Test Name</span>
                    </div>
                </div>
            </text>
        }
        @foreach (var dom in Model.LawyerConsultModel.LawyerDomiciliationsList.Rows)
        {
            <text>
                <div class="lawyerDomiciliation">
                    <label>Adress :</label>
                    <p>Test</p>
                </div>
            </text>
        }
    </div>

【问题讨论】：

标签： c# html asp.net-core razor css-grid

【解决方案1】：

这是一个演示：

html:

<div id="lawyerOfficeLinksContainer">
    <div class="left">
        @foreach(var contract in Model.LawyerConsultModel.LawyerContractsList.Rows)
        {
            <text>
                <div>
                    <h3>Title</h3>
                    <div>
                        <b><label>Name :</label></b>
                        <span>Test Name</span>
                    </div>
                </div>
            </text>
        }
    </div>
    <div class="right">
        @foreach (var dom in Model.LawyerConsultModel.LawyerDomiciliationsList.Rows)
        {
            <text>
                <div>
                    <label>Adress :</label>
                    <p>Test</p>
                </div>
            </text>
        }
    </div>
</div>

css:

 #lawyerOfficeLinksContainer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .left {
        grid-column: 1/2;
    }

    .right {
        grid-column: 2/2;
    }

结果：

【讨论】：