Pass the mouse over the box
See the Pen clip-path animation by Wilhelm (@wilcho) on CodePen.
Pass the mouse over the box
See the Pen clip-path animation by Wilhelm (@wilcho) on CodePen.
This is a simple example of how we can format galleries inserted into WordPress posts using CSS Grid in the style sheet.
The CSS class that represents the gallery within the post is .gallery
and each gallery format ranges from the .gallery-columns-1
class that represents a column to the .gallery-columns-9
class that represents a nine-column gallery.
.gallery.gallery-columns-1 { display: grid; grid-gap: 10px; grid-template-columns: 1fr; grid-template-rows: auto; } .gallery.gallery-columns-2 { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .gallery.gallery-columns-3 { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; } .gallery.gallery-columns-4 { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; } .gallery.gallery-columns-5 { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: auto; } .gallery.gallery-columns-6 { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: auto; } .gallery.gallery-columns-7 { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: auto; } .gallery.gallery-columns-8 { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: auto; } .gallery.gallery-columns-9 { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: auto; }