Html and CSS starter to build a Fluid/Elastic/Liquid Grid layout09.07.24

When starting a new HTML project, this can come handy as a starter point
# html code
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Grid Starter Page</title>
    <link rel="stylesheet" href="css/index.css">    
  </head>
  <body>
    <div class="container">
      <header></header>
      <main></main>
      <aside></aside>
      <footer></footer>
    </div>
  </body>
</html>
veto@veto:~/webs/gridstarter$ emacs  index.html 
veto@veto:~/webs/gridstarter$ cat   index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Grid Starter Page</title>
    <link rel="stylesheet" href="css/index.css">    
  </head>
  <body>
    <div class="container">
      <header></header>
      <nav></nav>      
      <main></main>
      <aside></aside>
      <footer></footer>
    </div>
  </body>
```

# CSS
```css
html {
  font-size: 62.5%; /* trick to make 1rem = 10px */
}

body {
  background-color:green;
  margin:0;
  padding:0;
  font-family: Verdana,Arial;
}

.container {
  display:grid;
  grid-template-columns: 16rem 1fr 16rem;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
      "header header header"
      "nav content sidebar"
      "footer footer footer";
  min-height: 100vh;
}

/* Naming the Area */
header {
    grid-area:header;
    padding: 2rem;
    background-color: red;
}

nav {
    grid-area:nav;
    padding: 2rem;
    background-color: green;    
}

main {
    grid-area:content;
    padding: 2rem;
    background-color: blue;        
}

aside {
    grid-area:sidebar;
    padding: 2rem;
    background-color: yellow;        
}

footer {
    grid-area:footer;
    padding: 2rem;
    background-color: grey;        
}

@media (max-width: 1024px){ /* only need for smaller screens */
    .container {
	grid-template-columns: 1fr;
	grid-template-rows: auto minmax(5rem,auto) 1fr minmax(5rem, auto) auto;
	grid-template-areas:
	    "header"
	    "nav"
	    "content"
	    "sidebar"
	    "footer";
    }
}

```

https://gitlab.cckcoder.cc/myridia/grid

Anonymous

Html and CSS starter to build a Fluid/Elastic/Liquid Grid layout09.07.24

Information Epoch 1732366558