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.
Screencast.From.2025-11-09.18-52-36.mp4
A decent version of node and npm.
- Clone the repository and go inside it:
git clone https://github.com/Turbash/grid
cd grid
- Install the dependencies:
npm install
- Run the website:
npm run dev