CSS Grid | 13 Four corners

In this example below you will see how to do a CSS Grid | 13 Four corners with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SimonNonnis, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SimonNonnis ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Grid | 13 Four corners</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="corners">
  <div class="corner item">1</div>
  <div class="corner item">2</div>
  <div class="corner item">3</div>
  <div class="corner item">4</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/SimonNonnis/css-grid-or-13-four-corners-GQOzxx */
/* General */
:root {
  --yellow: #ffc600;
  --black: #272727;
}

html {
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 900;
  font-size: 30px;
  color: var(--black);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-image: linear-gradient(110deg, #30a6f2, #224de3);
  min-height: 100vh;
  margin: 50px;
  background-position: fixed;
  letter-spacing: -1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 5px 0;
}

.button {
  padding: .7em 1em .2em 1em;
}

/* Style */
.corners {
  height: 100vh;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  background-color: var(--yellow);
  border: 5px solid red;
  align-items: end;
  justify-items: end;
}

.corner {
  background-color: red;
  padding: 1em;
}

.corner:nth-child(1),
.corner:nth-child(2) {
  align-self: start;
}

.corner:nth-child(1),
.corner:nth-child(3) {
  justify-self: start;
}



Comments