Skip to content

Turbash/grid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Nov 9, 2025
6c04368 · · Nov 9, 2025

History

21 Commits
Nov 5, 2025
Nov 9, 2025
Nov 5, 2025
Nov 9, 2025
Nov 5, 2025
Nov 5, 2025
Nov 5, 2025
Nov 5, 2025
Nov 5, 2025

Repository files navigation

Grid CSS Playgound

CSS Grid and FlexBox Playground

A website that offers a FruitBox Playground to test and strengthen your knowledge of css properties like Flexbox and Grid. Your task is to put the different fruits in the right coloured baskets using css properties. Concept and art is taken from https://www.codehelp.in/dashboard/fruitbox-flex

You are given a few lines to right the necessary css properties to put the fruits in the correct basket.

  • Initially the fruits are at different place then their basktes

  • The baskets have cetain css grid or flex properties applied to them.

  • The fruits also have some css grid or flex applied but some properties are missing.

  • You have to find these missing properties and enter them in the given area.

  • This will move the fuits inside the basket and thus solve the puzzle.

  • There are twenty such puzzles in Frutbox Flex and ten in Fruitbox Grid.

  • Progress is saved in local storage and levels start from where you left.

Demo

Screencast.From.2025-11-09.18-52-36.mp4

Requirements

A decent version of node and npm.

How to run locally

  1. Clone the repository and go inside it:
git clone https://github.com/Turbash/grid
cd grid

  1. Install the dependencies:
npm install

  1. Run the website:
npm run dev

Releases

No releases published

Packages

No packages published

Languages