Web Design

CSS Grid Crash Course

Code:

In this CSS tutorial we are going to learn about the most used properties of CSS Grid Layout

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>
    <h1>CSS Grid Crash Course</h1>
    <div class="main-container">
      <div class="grid-element"></div>
      <div class="grid-element"></div>
      <div class="grid-element"></div>
      <div class="grid-element"></div>
      <div class="grid-element"></div>
      <div class="grid-element"></div>
      <div class="grid-element"></div>
      <div class="grid-element"></div>
      <div class="grid-element"></div>
    </div>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}
body {
  font-family: sans-serif;
  max-width: 900px;
  margin: auto;
}
h1 {
  text-align: center;
  font-weight: bolder;
  font-size: 4rem;
  margin: 2rem 0;
  padding: 1rem;
  background-color: rgb(0, 74, 158);
  color: #fff;
}
.main-container {
  background-color: #2466d4;
  box-shadow: 0 0 10px 2px;
  height: 600px;
}
.grid-element {
  border-radius: 10px;
  border: 1px solid;
}
.grid-element:nth-child(odd) {
  background-color: red;
}
.grid-element:nth-child(even) {
  background-color: white;
}
.main-container {
  display: grid;
  grid-template-columns: 80px 150px auto;

  /* grid-template-rows: 25% 100px auto; */
  grid-template-rows: 300px auto;
  grid-template-columns: 300px 300px 300px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);

  /* column-gap: 10px; */
  /* row-gap: 20px; */
  gap: 20px 10px;
  gap: 20px;
}
/* Justify Items */
.grid-element {
  width: 100px;
}
.main-container {
  /* justify-items: start;
  justify-items: end;
  justify-items: center; */
}

/* Align Items */
.grid-element {
  /* width: 100px; */
  width: auto;
  /* height: 100px; */
}
.main-container {
  align-items: start;
  align-items: end;
  align-items: center;
  align-items: stretch;
}

/* Justify Content */

.grid-element {
  height: 100px;
}
.main-container {
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  gap: 0;
  justify-content: start;
  justify-content: end;
  justify-content: center;

  justify-content: space-around;
  justify-content: space-between;
  justify-content: space-evenly;
}

/* Align Content */

.main-container {
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 150px);

  align-content: end;
  align-content: start;
  align-content: center;

  align-content: space-around;
  align-content: space-between;
  align-content: space-evenly;
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: