Please help with a problem in grid-template-areas

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

and that is what happened
Screen Shot 2021-03-08 at 3.15.43 AM

There’s no .wrapper in your HTML :slight_smile:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible">
	<script src="https://kit.fontawesome.com/5924b00f20.js" crossorigin="anonymous"></script>
	<title>Company</title>
	<link rel="stylesheet" href="style.css">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	</head>
<body>
	<div class="wrapper">
		<!-- Header Start -->
		<header class="complogo">
			<img src="pngfreelogocopy.png" alt="">
		</header>
		<!-- Naviigation Start -->
		<nav>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Testimonials</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Contacts</a></li>
			</ul>
		</nav>
		<!-- Welcome Board Section -->
		<div class="welcome-board">
			<h1>Welcome to <br>Company</h1>
		</div>
		<!-- Our Team Leaders Section -->
		<div class="ourtlinfo">
			<h2>Our Team Leaders</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, maxime. Vero dicta, dolor corporis deserunt minima<br>expedita mollitia incidunt facere eveniet nobis aliquam, laudantium culpa.</p>
		</div>
		<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>
		</div>
</body>
</html>

thats it all the code tell now

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible">
	<script src="https://kit.fontawesome.com/5924b00f20.js" crossorigin="anonymous"></script>
	<title>Company</title>
	<link rel="stylesheet" href="style.css">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	</head>
<body>
	<div class="wrapper">
		<!-- Header Start -->
		<header class="complogo">
			<img src="pngfreelogocopy.png" alt="">
		</header>
		<!-- Naviigation Start -->
		<nav>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Testimonials</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Contacts</a></li>
			</ul>
		</nav>
		<!-- Welcome Board Section -->
		<div class="welcome-board">
			<h1>Welcome to <br>Company</h1>
		</div>
		<!-- Our Team Leaders Section -->
		<div class="ourtlinfo">
			<h2>Our Team Leaders</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, maxime. Vero dicta, dolor corporis deserunt minima<br>expedita mollitia incidunt facere eveniet nobis aliquam, laudantium culpa.</p>
		</div>
		<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>
		</div>
</body>
</html>

and this is the css:

body{

margin: auto;

background-color: white;

font-family: 'Roboto', sans-serif;

max-width: 1920px;

}

/* wrapper grid */

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

;

}

/* start header section */

.complogo{

grid-area: header;

text-align: left;

}

.complogo img{

height: 180px;

}

/* start nav section */

nav{

grid-area: navbar;

background-color: #898d8e;

padding-top: 10px;

padding-bottom: 10px;

}

nav ul li{

display: inline;

padding-left: 6em;

}

nav ul li a{

text-decoration: none;

font-size: 25px;

color: white;

padding-left: 10px;

padding-right: 10px;

}

nav ul li a:hover{

background-color: #7d9097;

padding: 26px 10px 26px 10px;

}

/* start welcome bord section */

.welcome-board{

grid-area: welsec;

background-image: url(Teamwork2.jpg);

height: 800px;

background-repeat: no-repeat;

background-size: cover;

width: 100%;

}

.welcome-board h1{

margin-left: 70%;

text-align: center;

color: #d7794a;

font-size: 90px;

padding-top: 25rem;

}

/* start our teamleaders section */

.ourtlinfo{

grid-area: tlinfo;

text-align: center;

}

.ourtlinfo h1{

font-size: 60px;

padding-top: 10rem;

}

.ourtlinfo p{

padding-top: 2rem;

font-size: 25px;

}

.ourtlimg{

}

.name1{

grid-area: port1;

}

.name2{

grid-area: port2;

}

.name3{

grid-area: port3;

}

i need to make ourtlimg class h1, and p in the same line with grid-area

@workycamp I removed <div class="ourtlimg"></div> and it worked.

can you send me a screen shot. that’s what happened when i did what you said i want it in. the same line

@workycamp

Copied & pasted your code and only removed the said tags:
Tryit Editor v3.6 (w3schools.com)

WOOOOW Bro you did it thank you so much. but can you tell me why is that what is the reason.

@workycamp I’m still learning HTML & CSS so I could be wrong, but I think the reason could be that name1 name2 and name3 aren’t direct children of the grid container.

Or perhaps read through these guides to find out precisely why:
CSS Grid Layout - CSS: Cascading Style Sheets | MDN (mozilla.org)

thank you so much anyway i am still learning too. good luck

@workycamp I found the answer:

We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items.

Looks like I got it right :grin:

:grin: :grin:
your brilliant BRO