Creating a grid of DIV elements on a web page is easy with CSS, thanks to its ‘Grid’ display type option. The first step to creating a grid of elements in CSS is to create a container that the elements will be in. Whether you are creating a grid of images, buttons, text fields, you would start by creating a DIV element. Let us call our new DIV element ‘imagegrid’ for this code example. Also create four images to start with. Their class should be ‘thumbnail’ for this example:
HTML:
<div class="imagegrid">
<img class="thumbnail" src="image.jpg" />
<img class="thumbnail" src="image.jpg" />
<img class="thumbnail" src="image.jpg" />
<img class="thumbnail" src="image.jpg" />
</div>
CSS code:
div.imagegrid {
display: grid; //This is where you tell it that 'imagegrid' will be in grid formation.
grid-template-columns: 1fr 1fr 1fr 1fr; //This indicates that there will be four columns in our grid.
}
img.thumbnail {
width: 30%;
}
Note that your width setting needs to be adjusted based on the overall layout that your web page will have. The ‘width’ setting in this case will adjust the width of each image in the grid. Thanks to CSS grids, we can have consistently sized images in-line on web pages to keep things tidy. You can swap out the images for buttons and use it to align buttons in the same way so that they are all the same dimensions.
Further Reading
CSS Tutorials: How To Prevent A Background From Scrolling With CSS