CSS grid gallery

Tropical fruits

Tropical fruits are fruits that usually grow in warm climates or equatorial regions of the world. This fruit is characterized by bright colors, sweet taste, unique texture and is often a very attractive fruit for fresh consumption. The group of tropical fruits includes pitaya, rambutan, lychee, guava, carambola, papaya, durian, pomegranate, coconut, and many other fruits.

The image gallery in this project was created with the help of a CSS grid layout. Using the grid-template-columns and grid-template-rows properties, one column and seven rows were created for screen sizes below 544px, two columns and six rows for screen sizes between 544px and 768px, and four columns and three rows for screen sizes over 768px.

The scrollIntoView() JavaScript method is applied to each image in the gallery as a click event. In order to enable a smooth scrolling effect, the scrollIntoView() method is passed an object with a property of behavior: smooth;