Play with grid

CSS Grid.md

CSS Grid is a two-dimensional grid-based layout.

When to use CSS Grid?

• user interfaces;
• overall layout on website.

How does it work?

Grid container contains grid items, which are its direct children.

Grid is created by the

display: grid;

command on the grid container.

Properties for Grid container and Grid items:

Grid container	Grid items
display	grid-column-start
grid-template-columns	grid-column-end
grid-template-rows	grid-row-start
grid-template-areas	grid-row-end
grid-template	grid-column
column-gap	grid-row
row-gap	grid-area
gap	justify-self
justify-items	align-self
align-items	place-self
place-items
justify-content
align-content
place-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

Table of contents

1. grid-template-...

• fr units
• grid-template-columns
• grid-template-rows

2. gaps
3. height
4. align-items
5. justify-contnet
6. Item position

• align-self
• justify-self

7. grid-column/row

• grid-column
• grid-row

8. Responsiveness
9. Sources

grid-template-...

Divides grid into columns or rows

fr units

fr means fractional unit. They can be defined as portion of the remaining space.

We can divide the space into four equal parts - each has a width equal to 1fr, or 25% of the width of the container. For 1fr 1fr 1fr 1fr it is:

The notation 1fr 3fr will divide the space into two containers first having 75% width, the second 25%:

1fr 2fr 1fr will divide the space into 25%-50%-25%:

grid-template-columns

Different units can be used - all records below give the same result on grid container with width: 1000px (They will be identical if we don't use gap and padding in our container!):

grid-template-columns: 200px 400px 400px;
grid-template-columns: 20% 40% 40%;
grid-template-columns: 1fr 2fr 2fr;

Here we divide the grid into three columns of equal width:

grid-template-columns: repeat(3, 1fr);

grid-template-rows

It works analogously to grid-template-columns, it divides the grid into rows.

gaps

Adds gaps between grid elements.

We can add gaps between columns

column-gap: 5px;

gaps between rows

row-gap: 5px;

or between all elements:

gap: 5px;

By default it's gap: 0px.

height

If we have a grid divided into columns, the height of each row is set according to the height of the largest element in that row.

To set the same height for each row, you can use:

grid-auto-rows: 100px;

The disadvantage is that there is little flexibility.

However, you can use the minmax function, which allows you to set lower and upper height limits. In the following notation, each line will be at least height: 100px. If any row has an element that is over 100px, the height of the row will increase (but only this row, others stay with height: 100px).

grid-auto-rows: minmax(100px, auto);

align-items

Decides the behavior of grid items in a row.

Default: all stretch has the same width.

align-items: stretch;

However, you can keep each item's height set on a per-item basis, and then decide whether to align these items to the top (start), middle (center) or bottom (end) of the row.

align-items: start;

align-items: center;

align-items: end;

justify-contnet

Decides the behavior of grid items in a column.

Default:

justify-content: start;

justify-content: center;

justify-content: end;

justify-content: space-around;

justify-content: space-between;

Item position

Set on the element whose position you want to change.

align-self

Vertical repositioning. Default: align-self: start

.item:nth-of-type(2) {
    height: 100px;
    width: 100px;
    align-self: center;
}

align-self: start;

align-self: end;

justify-self

Horizontal repositioning. Default: justify-self: start

.item:nth-of-type(2) {
    height: 100px;
    width: 100px;
    justify-self: center;
}

justify-self: start;

justify-self: end;

grid-column/row

In the developer's tools, under Elements->Layout, select the following settings:

This way you will see the line number on the grid container:

You can now easily set the number of grid boxes for each element with grid-column or grid-row.

grid-column

Horizontal.

The following three ways are equivalent.

.item:nth-of-type(1) {
    background-color: rgb(93, 66, 117);
    grid-column-start: 1;
    grid-column-end: 3;
}

.item:nth-of-type(1) {
    background-color: rgb(93, 66, 117);
    grid-column: 1 / 3;
}

.item:nth-of-type(1) {
    background-color: rgb(93, 66, 117);
    grid-column: 1 / span 2;
}

number1 / span number2

number1 determines the beginning of the element, and number2 tells how many cells we stretch it into.

grid-row

Vertical.

.item:nth-of-type(3) {
    background-color: rgb(70, 117, 66);
    grid-row-start: 2;
    grid-row-end: 4;
}

.item:nth-of-type(3) {
    background-color: rgb(70, 117, 66);
    grid-row: 2 / 4;
}

.item:nth-of-type(3) {
    background-color: rgb(70, 117, 66);
    grid-row: 2 / span 2;
}

Note that element 4 "jumped" into place of element 3.

Responsiveness

If we display our grid on devices with smaller screen widths, it usually becomes unreadable.

To prevent this we can use media query.

@media (max-width: 500px) {
    .container {
        grid-template-columns: 1fr;
    }
}

Another way is to use a wrapper on the container when defining the grid template (fluid columns).

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

This notation means that there are to be as many cells as will fit in the row, but each cell must be at least 200px wide.

The effect on different resolutions looks like this:

In this solution, you have to be careful with the combined fields (grid-column / grid-row) and their scaling behavior!

Sources

• CSS Grid Crash Course 2022 from Brad Traversy
• A Complete Guide to Grid from Chris House

GridTemplate-description.md

Our goal is to get a website layout that looks like this:

The grid container will be body, while the items are header, main, nav, aside and footer.

<body>
    <header>Header</header>
    <main>Main Content</main>
    <nav>Navigation</nav>
    <aside>Side bar</aside>
    <Footer>Footer</Footer>
</body>

We apply a basic style to the elements.

header,
main,
nav, 
aside, 
footer {
    background-color: rgb(21, 101, 104);
    color: white;
    padding: 20px;
    border: 1px solid white;
}

and global body style

body {
    background-color: #22272E;
    font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;
    height: 100vh;
}

grid-template-areas

We create the grid of the grid, assigning each element a precise name and describing their placement relative to each other in

body {
    display: grid;
    grid-template-areas: 
      'header header header'
      'nav content sidebar'
      'nav footer footer';
}

header {
    grid-area: header;
}

main {
    grid-area: content;
}

nav {
    grid-area: nav;
}

aside {
    grid-area: sidebar;
}

footer {
    grid-area: footer;
}

Effect:

grid-template-columns

To change the width of the columns we use grid-template-columns in body:

grid-template-columns: 1fr 4fr 1fr;

grid-template-rows

To change the height of the rows we use grid-template-rows in body:

grid-template-rows: 80px 1fr 70px;

1fr is all the remaining height here.

gridTemplate.css

body {
    background-color: #22272E;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    height: 100vh;

    display: grid;
    grid-template-areas: 
    'header header header'
    'nav content sidebar'
    'nav footer footer';

    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 80px 1fr 70px;
}

header,
main,
nav, 
aside, 
footer {
    background-color: rgb(21, 101, 104);;
    color: white;
    padding: 20px;
    border: 1px solid white;
}

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

gridTemplate.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./gridTemplate.css">
  <title>Grid Template</title>
</head>
  <body>
      <header>Header</header>
      <main>Main Content</main>
      <nav>Navigation</nav>
      <aside>Side bar</aside>
      <Footer>Footer</Footer>
  </body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto perferendis nam veritatis recusandae eos unde, laboriosam aliquam corporis repellendus distinctio enim natus optio est asperiores ipsa pariatur provident? Excepturi, voluptate!</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
    </div>
</body>
</html>

style.css

body {
    background-color: #22272E;
    font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;
}

.container {
    max-width: 1000px;
    margin: 50px auto;
    padding: 10px;
    border: 1px solid rgb(197, 98, 114);
    
    /* lets play */
    display: grid;
    
    /* 
    200px 400px 400px;
    20% 40% 40%;
    1fr 2fr 2fr;

    or grid-template-rows */
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-columns: repeat(auto-fill, minmax(200px)); */
    
    /* or column-gap | row-gap */
    gap: 5px;

    /* grid-auto-rows: 100px; */
    grid-auto-rows: minmax(100px, auto);
    
    /* stretch, start, center, end */
    align-items: stretch;

    /* start (default), center, end, space-around, space-between */
    justify-content: start;
  }

  .item {
    background-color: rgb(21, 101, 104);
    color: rgb(255, 255, 255);
    font-size: 26px;
    padding: 20px;
    border-radius: 8px;
  }

  /* .item:nth-of-type(2) {
    height: 100px;
    width: 100px;
    justify-self: center;
    align-self: center;
  } */

  /* .item:nth-of-type(1) {
    background-color: rgb(93, 66, 117);
    grid-column-start: 1;
    grid-column-end: 3;
    grid-column: 1 / span 2;
    grid-column: 1 / 3;
  } */

  /* .item:nth-of-type(3) {
    background-color: rgb(93, 66, 117);
    grid-row-start: 2;
    grid-row-end: 4; 
    grid-row: 2 / span 2;
    grid-row: 2 / 4; 
  }  */

  /* @media (max-width: 500px) {
    .container {
        grid-template-columns: 1fr;
    }
  } */