Close menu
Github Youtube LinkIn
Contact Me
Karol

CSS Grid Generator

Live Preview: Click Here

This Git repository contains a CSS Grid Generator built using pure HTML, CSS, and Vanilla JavaScript. It allows users to easily create and customize CSS Grid layouts. Additionally, Syntax highlighting from highlightjs.org is used to highlight code on the page.

Version 1.0

In version 1.0, it is possible to enable a grid that will generate CSS and HTML code. However, currently, the selected elements are not saved anywhere and the code is not generated.


Grid Generator Screenshot

Features

The code features a grid generator placed in the GridGenerator class, which includes several methods.

  • initializeSelectionCoordinates: Takes information on the row and column from which the grid selection should start and end.
  • getMinMaxValues: Allows for placing these values in a loop for dynamic selection of elements as the mouse is moved while holding down the mouse button.
  • selectGridArea: Contains a loop that adds the selected class to the selected children of the container.
  • updateColumnsAndRows: Allows the user to change the number of columns and rows.
  • clearLiveSelection: Removes the selected class from the container children, so only the currently selected elements are highlighted.

Change Log v1.1

  • Fixed: Centered the information in the footer.
  • Fixed: Corrected BEM (Block Element Modifier) convention mistakes.
  • Added: Class SelectionHistory and variable historyArray.

Version 1.2

In version 1.2, I added the ability to select multiple fields consecutively, blend colors of those fields, and introduce a dynamic highlighting effect.

Color Blending Preview

Change Log v1.2

  • Added: New class for color sequence and saved selection colors.
  • Updated: selectGridArea now includes three parameters for improved functionality.

Version 1.3

The CSS and HTML code is now dynamically generated on the mouseup event.

Code Generation Preview

Change Log v1.3

  • Fixed: Gaps now work properly.
  • Added: New class CodeGenerator for generating HTML and CSS code.

Version 1.4

Fixed a bug where modifying rows, columns, or gaps after selection would crash the generator.

Change Log v1.4

  • Fixed: Generator now clears all data upon each update to prevent errors.