Welcome to our collection of CSS Calendar Grids! Here, you'll find a curated selection of free HTML and CSS code examples for calendar grids sourced from platforms like CodePen, GitHub, and other reliable resources. This collection serves as an update to our February 2022 collection, featuring two new calendar grid items.

Explore a variety of designs and functionalities, and choose the perfect calendar grid to enhance your website or application.

Related Articles

  1. CSS Calendars
Demo image: CSS Grid Advent Calendar

Author

  • David Tappenden

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Grid Advent Calendar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Grid: Advent Calendar

Author

  • Olivia Ng

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS Grid: Advent Calendar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Johnny Fekete

Links

Made with

  • HTML (Pug) / CSS (PostCSS)

About a code

CSS Christmas Calendar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Grid: Calendar

Author

  • Olivia Ng

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Grid: Calendar

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: no

Dependencies: simple-line-icons.css

Demo image: CSS Grid Calendar

Author

  • Mert Cukuren

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Grid Calendar

HTML calendar with CSS Grid.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Grid Calendar

Author

  • Adrià

Links

Made with

  • HTML
  • CSS

About the code

CSS Grid Calendar

HTML and CSS grid calendar.

Demo image: Dynamic Data Calendar

Author

  • Nikita Dubko

Links

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript (jQuery.js)

About the code

Dynamic Data Calendar

Calendar with dynamic data.

Demo image: Responsive Flexbox Calendar

Author

  • Dudley Storey

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Responsive Flexbox Calendar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Calendar Mockup

Author

  • Dan Couper

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Calendar Mockup

Very quick mockup of calendar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Flexbox Responsive Calendar

Author

  • Gabi

Links

Made with

  • HTML / CSS / JS

About a code

Flexbox Responsive Calendar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -