Compare & Learn


  • houses multiple projects/packages
  • decision is dependent on tech also(java, etc)
  • every pkg contains own package.json since every package is full-fledged product
    • pkgs cn have dependency relation b/w each other
    • implemented by symlinks
      • lerna and yarn workspaces give us the ability to build libraries and apps in a single repo without forcing us to publish to npm or other registries
    • The beauty behind these technologies is that they can find package dependencies by analyzing package.json files located at each project’s root folder.
    • Thereby, these tools make it obsolete to manually create symlinks or use "low-level" npm link directly.
    • components shared locally therefore faster code-test-debug cycles.


  1. install & build in each folder
  2. lerna with npm. installs node_modules for each project by single command
lerna bootstrap
  1. lerna with yarn
    npmClient: "yarn"
  2. yarn workspaces
    • creates only 1 node_modules, hoists the other node_modules to root
    "workspaces": [
  3. lerna with yarn workspace
     "npmClient": "yarn",
     "useWorkspaces": true
    • You solely use yarn workspaces for the Mono-Repo workflow.npm
    • You use lerna’s utility commands to optimize managing of multiple packages, e.g., selective execution of npm scripts for testing.
    • You use lerna for publishing packages since lerna provides sophisticated features with its version and publish commands.

Mono repo lerna yarn



  • main reason of creating was perf
    • freezing versions, offline
  • npm & yarn are now even on how version is managed
  • exlusive feature - yarn workspace
  • lerna came long before yarn workspace
    • used symlinks, uses yarn workspace now
    • provides publishing & version management to publish projects independently



  • align on X axis
    • flex-start,flex-end, center, space-between, space-around


  • align on Y axis
    • flex-start, flex-end, center, baseline, stretch


  • change direction
    • row, row-reverse, column, column-reverse
individual properties


  • change order(advanced of row/column-reverse)
  • default:0, can be any int value


  • like align-item, but for individual item

many elements


  • nowrap, wrap, wrap-reverse;


  • flex-flow: flex-direction flex-wrap


  • spacing b/w lines (when you have multiple lines becuase of flex-wrap)
  • flex-start, flex-end, center, space-between, space-around, stretch
  • no effect when single line



  • start from the number of column
  • default: span 1
  • works with span too


  • end till here, works with negative numbers
  • span
    • can be used instead of grid-column-end
    • ex: grid-column-end: span 2;


  • grid-column: grid-column-start / grid-column-end;

grid-row-start, grid-row-end, grid-row

grid-area: grid-row-start / grid-column-start / grid-start-end / grid-column-end

grid-template-columns: 20% 20% 20% 20% 20%; grid-template-columns: repeat(5, 20%); grid-template-columns: 400px 50% grid-template-columns: 1fr 5fr;