CSS Grid | 12 Auto flow column

In this example below you will see how to do a CSS Grid | 12 Auto flow column 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 | 12 Auto flow column</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="tracks">
    <div class="track">
      <h2>To the Man on Trail</h2>
      <button class="button">⭐</button>
      <button class="button">❤️</button>
      <button class="button">❌</button>
    </div>
    <div class="track">
      <h2>A Klondike Christmas</h2>
      <button class="button">⭐</button>
      <button class="button">❤️</button>
      <button class="button">❌</button>
    </div>
    <div class="track">
      <h2>Two Gold Bricks</h2>
      <button class="button" class="button">⭐</button>
      <button class="button" class="button">❤️</button>
      <button class="button" class="button">❌</button>
    </div>
    <div class="track">
      <h2>The Son of the Wolf</h2>
      <button class="button" class="button" class="button">⭐</button>
      <button class="button" class="button" class="button">❤️</button>
      <button class="button" class="button" class="button">❌</button>
    </div>
    <div class="track">
      <h2>When the World was Young</h2>
      <button class="button">⭐</button>
      <button class="button">❤️</button>
      <button class="button">❌</button>
    </div>
    <div class="track">
      <h2>The Red One</h2>
      <button class="button">⭐</button>
      <button class="button">❤️</button>
      <button class="button">❌</button>
    </div>
  </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/SimonNonnis/css-grid-or-12-auto-flow-column-gvXZXw */
/* 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: 10px;
  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;
}

/* Style */
.track {
  background: white;
  padding: 1em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: column;
}

.button {
  padding: 1em 1em .3em 1em;
  margin-left: .5em;
  display: flex;
  align-content: center;
  justify-content: center;
  cursor: pointer;
}

Comments