CSS Grid Notes

Simple Navbar

  • auto-fill: takes the rest of the space and adds as many columns as can fit.
  • auto-fit: takes the additional space and collapses the columns that would otherwise occupy them, almost like they don't exist.
  • CSS

    .grid {
      display: grid;
      /* 100px is the minimum width for a column*/
      grid-template-columns: repeat(auto-fit, 100px);
      grid-column-gap: 20px;
      grid-row-gap: 8px;
      justify-content: center;
    }

    JSX

    import React from "react";
    import { Link } from 'react-router-dom';
    
    export default props => {
      const { links } = config;
      return (
        <nav className={s.grid}>
          {links.map(l => {
            return (
              <Link key={l.text} to={l.to}>
                {l.text}
              </Link>
            );
          })}
        </nav>
      );
    };












    arrow_back

    Previous

    Big O

    Next

    Recruiter FYI
    arrow_forward