多个h1内联网格模板区域

Question

大家好，我是html和css的新手，我有一个简单的问题：我写了这个html代码

<div class="ourtlimg">
            <div class="name1"><h1>Daniel Martin</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p></div>
            <div class="name2"><h1>Craig Nobel</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p></div>
            <div class="name3"><h1>Nicole Mark</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p></div>

        </div>

我在6Times 1FR中为类name1、name2、name3创建了一个网格模板区域，重复为{port1 port1 port2 port2 port3 port3}以一行形式显示，当我给每个类提供三个网格区域中的一个时，它会像下面的图像一样显示。我想用网格系统将它们显示在一行中，你能帮我吗。我想要它们在页面上显示，而不是在这里的pageenter图像描述下

我为包装器添加了以下css：

.wrapper{
display: grid;
grid-template-columns: repeat(6,1fr);
grid-template-areas:
'header header header header header header'
'navbar navbar navbar navbar navbar navbar'
'welsec welsec welsec welsec welsec welsec'
'tlinfo tlinfo tlinfo tlinfo tlinfo tlinfo'
'port1 port1 port2 port2 port3 port3'
;
}

和代码中的类：

.name1{
grid-area: port1;
float: left;
}
.name2{
grid-area: port2;
float: left;
}
.name3{
grid-area: port3;
float: left;
}

Answer 1

此css代码将完成所有工作=)

null

.ourtlimg {
  display: flex;
  justify-content: flex-start;
  display: -webkit-flex;
  -webkit-justify-content: flex-start;
}

<div class="ourtlimg">
  <div class="name1">
    <h1>Daniel Martin</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p>
  </div>
  <div class="name2">
    <h1>Craig Nobel</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p>
  </div>
  <div class="name3">
    <h1>Nicole Mark</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p>
  </div>

</div>