how to make a grid in HTML using CSS?-CodePudding

im new i and i have no idea what exacly i am doing, but i need help with inserting a css in an html file. and honestly i have no idea what css is this is what im trying to get

on w3shcool the tutorial is explaing the way to do it only using html, but what i am trying to do is having the css linked with the hmtl, so the grid code is in css

this is the css code i use,

body
{display:grid;
    grid-template-rows: 900px 1000px auto 42px;
    grid-template-columns: 150px  auto;
    grid-template-areas: 'header header' 
                         'menu menu'
                         'sidebar content'
                         'footer footer';
    gap: 10px;
    background-color: #FF69B4;
    padding: 10px;
}

header {
    grid-area: header;
}
nav {
    grid-area: menu; 
}
article {
    grid-area: content; 
}
aside {
    grid-area: sidebar; 
}
footer {
    grid-area: footer;
}

and here is the html:

<!DOCTYPE html>
<html lang="bg=BG">
    <head>
    <meta http-equiv="content-type" content="text/hmtl;charset=UTF-8">
        <title> COOL SITE!!! </title>
        <link rel="stylesheet" href="fail4e.css" type="text/css">
    <body>
    
<header>
        <h1> Test Text </h1>
<nav>
        <h1> Test Text </h1>
<article>
        <h1> Test Text </h1>
<aside>
        <h1> Test Text </h1>
<footer>
        <h1> Test Text </h1>

the thing is, there is nothing like grid and the sidebar is displayed below like its another paragraph. The html is the color i have set in the css, so they do have a connection. What do i have to do to make the grid?

CodePudding user response：

You need to close your tags.

And do not use these:

~~grid-template-rows: 900px 1000px auto 42px; grid-template-columns: 150px auto;~~

body {
  display: grid;
  grid-template-areas:
    'header header'
    'menu menu'
    'sidebar content'
    'footer footer';
  padding: 10px;
}

header {
  grid-area: header;
  background: salmon;
}

nav {
  grid-area: menu;
  background: lightblue;
}

article {
  grid-area: content;
  background: lightgrey;
}

aside {
  grid-area: sidebar;
  background: gold;
}

footer {
  grid-area: footer;
  background: tan;
}

<header><h1>Header</h1></header>
<nav>
  <span>menu-item</span>
  <span>menu-item</span>
  <span>menu-item</span>
</nav>
<article>main content</article>
<aside>sidebar</aside>
<footer>footer</footer>

CodePudding user response：

.griddiv{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

<!DOCTYPE html>
<html lang="bg=BG">
    <head>
    <meta http-equiv="content-type" content="text/hmtl;charset=UTF-8">
        <title> COOL SITE!!! </title>
        <link rel="stylesheet" href="fail4e.css" type="text/css">
    <body>
    
<div >
<header>
        <h1> Test Text </h1>
</header>
<nav>
        <h1> Test Text </h1>
</nav>
<article>
        <h1> Test Text </h1>
</article>
<aside>
        <h1> Test Text </h1>
</aside>
<footer>
        <h1> Test Text </h1>
</footer>

</div>
</body>

All you need is to use that grid-template, the "3" in that case is the number of items you want in the first line, and the 1f is that you want only 1 element in each item.