For the basics start here – https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_layout_named
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Layout</h1> <p>This grid layout contains six columns and three rows:</p>
</div>
</body>
</html>
Fraction is best for laying out the grid.
{
display: grid;
grid-template-columns:1fr 2fr 1fr;
}
The above code dives the horizontal layout into 4 fractions – and 3 columns.
the middle column takes up 2 of the 4 columns, so stretches 50% of the way across
The grid-template-columns: can be written in a function
grid-template-columns: repeat (4, 1fr)
Creates 4 columns, 1 fraction each – so 4 equally wide columns
Grid-gap: 1em;
Grid gap is the grid equivalent of margin – between each column.
Grid-auto-rows:100px;
This command will make the rows 100px tall
The problem with Grid-auto-rows is that it will keep the row at 100px tall, no matter the size of the content within the row. So text will ‘spill out’ or images will overlap.
Grid-auto-rows: minmax(100px, auto);
adding minmax – means in this instance that the row will be 100px tall minimum, and will auto adjust to the size of the content if required.
The angle bracket > shown above .nested > div{
Dictates the ‘instructions’ or CSS for all the small divs that are nested within that div (called “nested)
Justify-items:
Justify-items:stretch;
Justify-items: end;
Code from tutorials can be downloaded here – https://www.youtube.com/redirect?v=jV8B24rSN5o&event=video_description&redir_token=QF0iJJ_zBAQDZT88xtdPDwgxSIZ8MTU1NTUwMTkwOEAxNTU1NDE1NTA4&q=http%3A%2F%2Fwww.traversymedia.com%2Fdownloads%2Fcssgrid.zip
Small Business Dad 