Frid template areas problem please help

HTML-CSS
#1

hi all i am new to html and css i got a simple question: i wrote this html code

<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>

i made a grid-template-area for the class name1,name2,name3 in 6times 1fr repeat as{port1 port1 port2 port2 port3 port3}to display in one line and when i give each class one of three grid areas it display like the image below.I want to display them in one line with the grid system can you help please.I want them across the page instead of down the pageenter image description here

i added this css for the wrapper:

.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'
;
}

and this for the classes in code:

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

in the imageScreen Shot 2021-03-08 at 3.15.43 AM that is what happend

#2

Hi

Here is an example grid layout you can go by:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  

</div>

</body>
</html>

Some great examples can be found at CSS Grid Layout (w3schools.com)

2 Likes