fluid image container with black background

The grid-column-end value indicates the grid line that marks the right edge of the column. So the grid-column-start value is a number that indicates the grid line at the left edge of a column. The grid-column-end indicates where the first grid item ends. We’ll first use the grid-column-start property to indicate the column grid line where the first grid item starts.

So let’s create a new rule that targets the first grid item. We can specify on which line a grid item starts and ends, and how many tracks it should expand.

Now, we will use grid line numbers to control how items are placed by applying properties directly to a grid item. Knowing the above concepts will help you understand how we are going to position items (images) on our grid. Similarly, horizontal lines 1 and 2 determine the position of the first row, and lines 2 and 3 the second row and so on. Lines 2 and 3 the second column and so on. The vertical lines 1 and 2 determine the start and end points of the first column. It takes two grid lines to make a single column or row, one line on either side, so our 8-column and 8-row grid consist of You can refer to each grid line by a numerical index.Ĭolumns start at one, from left to right by default, and rows also begin at one from top to bottom. When we defined the grid tracks with grid-template-columns and grid-template-rows, grid provided us numbered lines called the grid lines to use for positioning the items. The grid div is the grid container, and all the direct child elements are the grid items. Positioning Grid Itemsīefore we start positioning the grid items, we will study a few basics concepts.

Note: By default the grid items are laid out according to the grid auto placement rules. Note: The object fit property only works if we set the width and height properties. We are doing this so the image can fill the height and width of its box (the grid item), maintaining its aspect ratio. Setting the object fit value to cover is like setting the background size to cover for the background image. Now, we will be inserting the grid items inside the grid container: 8x8 CSS Grid (8 Column Tracks & 8 Row Tracks) with Grid Lines from 1 to 9 (Both Columns & Rows) Note: All direct children of grid automatically become grid items. We are doing this by setting the height of the row to 5vw (viewport width). I experimented with these heights and came to the conclusion that 5% of viewport width is the perfect size for the height. We have 8 rows each with the height of 5 viewport width. } Note: The height of the rows is tied to the viewport width, so that the cells maintain its aspect ratio perfectly fine. In our example, I have given the value of 15px to make our grid look better. The value for grid gap can be any CSS length unit. grid-gap: It defines the size of the gap between rows and columns in a grid layout.In our example, we will we be making an 8x8 grid container. We declare these properties on the grid container. We use the grid-template-columns property to set the column tracks and grid-template-rows to set the row tracks.So, the div, with the class grid is going to be our grid container. A grid container is defined by setting an element’s display property to the grid.We can create a grid of other sizes also but that depends on the type of gallery you want. For example: Above is a gallery of images with images of varying width and height which is a perfect use case for CSS grids. You can achieve the same functionality very quickly using CSS Grids. Image galleries made by websites like Unsplash, Pinterest Etc, are made by techniques like positioning or translating the image item which is a very cumbersome task to do.

Fluid image container with black background