CSS Grid

 

 

 

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>

Header
Menu
Main
Right
Footer

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

wrapper

 

 

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

css2

 

wrapper3


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.


 

cssAnglebracket

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;

cssstretch

 

Justify-items: end;

 

cssend

 

 

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

 

 

 

Advertisements