Grid

Grid allows us to organise elements in two dimensions (row and column). If we set a container's display to either grid or inline-grid, then that container becomes a grid and all elements that are contained in that container will have the grid CSS applied to them.

The difference between flex and inline-flex is that:

grid-template-columns & grid-template-rows

A grid's layout can be set using grid-template-columns and grid-template-rows. Grid size values are space-separated. Grid size value can be a length, a percentage, or a fraction (using the fr unit).

Example showing grid-template-columns & grid-template-rows (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid-template-columns and grid-template-rows example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;

                grid-template-columns: 20% 1fr 20%;
                grid-template-rows: 100px  1fr;
                
                width: 500px;
                height: 500px;
                border: thin solid #cccccc;
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa;               
            }           
        </style>
    </head>
    
    <body>           
        <div id="gridContainer">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>
            <div>Five</div>
            <div>Six</div>            
        </div>    
    </body>
</html>

Make two grid containers and set them both to display:grid

Make two grid containers and set them both to display:inline-grid

fr

We can use the fr unit (fractions) to divide a grid's space. The fr unit allows us to set the size as a fraction of the space that is not being allocated to non-flexible items. In the example below, the total amount of space available to the fr units does not include the 50% of the width that is allocated to the first column.

Example showing the fr unit of measurement (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid fr unit example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: 50% 1fr 4fr;
                grid-template-rows: 100px  1fr;
                
                width: 100%;
                height: 500px;
                border: thin solid #cccccc;
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa;               
            }           
        </style>
    </head>
    
    <body>       
        <h5>grid-template-columns: 50% 1fr 4fr</h5>
        <div id="gridContainer">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>
            <div>Five</div>
            <div>Six</div>            
        </div>    
    </body>
</html>

Divide the browser screen into three columns of equal size.

auto

We can use the auto unit to set a grid's column width or row height. The auto unit sets a column or row size to be the smallest space needed by items on that column or row.

 

In the example below, the width of the three columns has has been set to auto.

Example showing auto sizing being applied to a grid's columns (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>auto sized columns example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: auto auto auto;
                grid-template-rows: 1fr 1fr;
                               
                border: thin solid #cccccc;
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa;               
            }           
        </style>
    </head>
    
    <body>    
        <h5>Resize the window to see the three columns use auto size.</h5>       
        <div id="gridContainer">
            
            <div>The minmax() function defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. The minmax() function defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. The minmax() function defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. </div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>
            <div>Five</div>
            <div>Six</div> 
        </div>    
    </body>
</html>

In the example above, the two rows are both sized as 1fr. Run this example. Adjust the window size to see how the two rows always stay the same height.

In the example below, the height of both rows has has been set to auto.

Example showing auto sizing being applied to a grid's rows (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>auto sized rows example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: auto auto;
                               
                border: thin solid #cccccc;
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa;               
            }           
        </style>
    </head>
    
    <body>    
        <h5>Resize the window to see the two rows use auto size.</h5>       
        <div id="gridContainer">
            
            <div>The minmax() function defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. The minmax() function defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. The minmax() function defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. </div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>
            <div>Five</div>
            <div>Six</div> 
        </div>    
    </body>
</html>

In the example above, the three columns are sized as 1fr. Run this example. Adjust the window size to see how the three columns always stay the same width.

Set all the columns and rows to size auto. Adjust the window size to see how the columns and rows adjust their size depending on the widow size.

min-content

If we set the size to min-content, then the size will be as small as is possible to hold its content.

Example showing min-content (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid min-content example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: min-content 1fr;
                grid-template-rows: 100px  1fr;
                
                width: 500px;
                height: 500px;
                border: thin solid #cccccc;
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa;               
            }           
        </style>
    </head>
    
    <body>           
        <div id="gridContainer">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>           
        </div>    
    </body>
</html>

Place an image in the first grid item and watch how this affects the grid.

In the example above, if the image is too tall, it will not fully display in the row. Adjust the code so that the first row has its height set to min-content, so that the image will be fully visible.

max-content

If we set the size to max-content, then the size will be large enough to hold its entire content. It will attempt to keep as much of the content from wrapping.

Example showing min-content (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid max-content example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: max-content 1fr;
                grid-template-rows: 100px  1fr;
                
                width: 500px;
                height: 500px;
                border: thin solid #cccccc;
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa;               
            }           
        </style>
    </head>
    
    <body>           
        <div id="gridContainer">
            <div>One Red Green Blue</div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>           
        </div>    
    </body>
</html>

Set the grid width to 100%. Resize the window and watch how the resizing affects the grid.

Place an image in the first grid item and watch how this affects the grid.

Place text and an image in the first grid item. Set its row height to min-content. Compare how this grid item is displayed when and column width is set to min-content and max-content.

minmax() function

The minmax() function defines a size range greater than or equal to min and less than or equal to max.

If max is smaller than min, then max is ignored and the function is treated as min.

Example showing the minmax() function (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid minmax() example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: minmax(min-content, 20%) 1fr 1fr;
                grid-template-rows: 100px  1fr;
                
                width: 100%;
                height: 500px;
                border: thin solid #cccccc;
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa;               
            }           
        </style>
    </head>
    
    <body>           
        <div id="gridContainer">
            <h5>Resize the window to see minmax() in operation.</h5>
            <div>The minmax() function defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. </div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>
            <div>Five</div>
            <div>Six</div>            
        </div>    
    </body>
</html>

Place an image in the first grid item and watch how the grid resizes.

repeat()

The repeat() function allows us to repeat a column layout two or more times. In the example below, we use repeat to create three columns.

Example showing the repeat() function (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid repeat() example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: repeat(3, minmax(min-content, 1fr));
                grid-template-rows: 100px  1fr;
                
                width: 100%;
                height: 500px;
                border: thin solid #cccccc;
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa;               
            }           
        </style>
    </head>
    
    <body>    
        <h5>Resize the window to see repeat() in operation.</h5>       
        <div id="gridContainer">
            
            <div id="one">The minmax() function defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. </div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>
            <div>Five</div>
            <div>Six</div>            
        </div>    
    </body>
</html>

Repeating Row Patterns

If we specify less grid-template-rows values than there are rows, then the set of grid-template-rows values will be applied repeatedly to the additional rows. In the example below, we have 18 rows and three grid-template-rows values.

Example of a repeating row pattern (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>Repeating row pattern example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;               
                grid-auto-rows: 50px 100px 200px;
                               
                border: thin solid #cccccc;
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa;               
            }           
        </style>
    </head>
    
    <body>    
        <h5>repeating row size pattern of 50px 100px 200px</h5>       
        <div id="gridContainer">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>         
            <div>Seven</div>
            <div>Eight</div>
            <div>Nine</div>
            <div>Ten</div>             
            <div>Eleven</div>
            <div>Twelve</div>
            <div>Thirteen</div>
            <div>Fourteen</div>
            <div>Fifteen</div>
            <div>Sixteen</div>         
            <div>Seventeen</div>
            <div>Eighteen</div>
        </div>    
    </body>
</html>

grid-template-areas

A grid's layout can be set by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell.

Example showing grid-template-areas (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid-template-areas example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: 100px 1fr;
                grid-template-rows: 50px 1fr 50px;   
             
                grid-template-areas: "header header"
                                     "sideMenu main"
                                     "footer footer";
                
                width: 500px;
                height: 500px;
                border: thin solid #cccccc;
            }
            
            #gridContainer > *
            {
                border: thin solid red;
                background-color: #ffffaa;               
            } 
   
            header
            {
                grid-area: header;
            }
            
            #sideMenu
            {
                grid-area: sideMenu;
            }
            
            main
            {
                grid-area: main;
            }
            
            footer
            {
                grid-area: footer;
            }
        </style>
    </head>
    
    <body>           
        <div id="gridContainer">
            <header>Header</header>
            <nav id='sideMenu'>Side Menu</nav>
            <main>Main</main>
            <footer>Footer</footer>            
        </div>    
    </body>
</html>

Convert the example shown here, so that its layout is organised in a grid.

Grid Gaps

Gaps can be placed between grid items using column-gap, row-gap, grid-column-gap and grid-row-gap. As seen in the example below, gaps are only created between items. Gaps are not created between items and the grid container's edge.

Example showing grid layout with gaps (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid gaps example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: 20% 1fr 20%;
                grid-template-rows: 100px  1fr;
                
                column-gap: 5px;
                row-gap: 20px;
                
                width: 500px;
                height: 500px;
                border: thin solid #aaaaaa;
                background-color: #ffeeee; 
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa;               
            }           
        </style>
    </head>
    
    <body>           
        <div id="gridContainer">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>
            <div>Five</div>
            <div>Six</div>            
        </div>    
    </body>
</html>

Write code to place a gap of 20px between the edge of the grid container and the grid items, as shown here.

justify-items

We use justify-items to align all items within all columns within a grid. Using justify-items only makes sense if the individual items have been preassigned a width. In the example below, all of the <div> items have been given a width of 50px.

Listed below are the main justify-items properties:

Example showing justify-items (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid justify-items example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: 20% 1fr 20%;
                grid-template-rows: 100px  1fr;
                column-gap: 50px;
                row-gap: 20px;
                
                justify-items: end;                
                
                width: 500px;
                height: 500px;
                border: thin solid #aaaaaa;
                background-color: #ffeeee; 
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa; 
                
                width: 50px;
            }             
        </style>
    </head>
    
    <body>           
        <div id="gridContainer">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>
            <div>Five</div>
            <div>Six</div>            
        </div>    
    </body>
</html>

justify-self

The justify-self property can be used to overwrite the grid justification for an individual grid item.

Example showing justify-self (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid justify-self example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: 20% 1fr 20%;
                grid-template-rows: 100px  1fr;
                column-gap: 50px;
                row-gap: 20px;   
             
                justify-items: end;
                                
                width: 500px;
                height: 500px;
                border: thin solid #aaaaaa;
                background-color: #ffeeee; 
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa; 
                
                width: 50px;
            }    
            
            #one
            {
                justify-self: start;
            }
        </style>
    </head>
    
    <body>    
        <h5>Item "one" has been set to justify-self: start</h5>
        <h5>All other items have been set to justify-self: end</h5>
        <div id="gridContainer">
            <div id="one">One</div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>
            <div>Five</div>
            <div>Six</div>            
        </div>    
    </body>
</html>

align-items

The align-item property is used to align every item within every row. Using justify-items only makes sense if the individual items have been preassigned a height. In the example below, all of the <div> items have been given a height of 50px. Listed below are the main align-items properties:

Example showing align-items (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid align-items example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: 20% 1fr 20%;
                grid-template-rows: 100px  1fr;
                column-gap: 50px;
                row-gap: 20px;
                
                align-items: end;
                                
                width: 500px;
                height: 500px;
                border: thin solid #aaaaaa;
                background-color: #ffeeee; 
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa; 
                
                height: 50px;
            }             
        </style>
    </head>
    
    <body>           
        <div id="gridContainer">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>
            <div>Five</div>
            <div>Six</div>            
        </div>    
    </body>
</html>

align-self

The align-self property can be used to overwrite the grid row alignment for an individual grid item.

Example showing justify-self (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid align-self example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: 20% 1fr 20%;
                grid-template-rows: 100px  1fr;
                column-gap: 50px;
                row-gap: 20px;   
             
                align-items: end;
                                
                width: 500px;
                height: 500px;
                border: thin solid #aaaaaa;
                background-color: #ffeeee; 
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa; 
                
                width: 50px;
            }    
            
            #one
            {
                align-self: start;
            }
        </style>
    </head>
    
    <body>    
        <h5>Item "one" has been set to align-self: start</h5>
        <h5>All other items have been set to align-self: end</h5>
        <div id="gridContainer">
            <div id="one">One</div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>
            <div>Five</div>
            <div>Six</div>            
        </div>    
    </body>
</html>

place-items

The place-items property combines the justify-items and align-items properties. The first value sets align-items and the second value set the justify-items.

Example of justify-items (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid place-items example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: 20% 1fr 20%;
                grid-template-rows: 100px  1fr;
                
                place-items: start end;
                
                column-gap: 50px;
                row-gap: 20px;
                
                width: 500px;
                height: 500px;
                border: thin solid #aaaaaa;
                background-color: #ffeeee; 
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa; 
                
                height: 50px;
            }             
        </style>
    </head>
    
    <body>   
        <h4>Example showing place-items: start end</h4>        
        <div id="gridContainer">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>
            <div>Five</div>
            <div>Six</div>            
        </div>    
    </body>
</html>

place-self

The place-self property can be used to overwrite the column justification and row alignment for an individual grid item. The first value sets align-self and the second value sets justify-self. If only one value is given, then this is assigned to both align-self and justify-self.

Example showing the place-self property (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>grid align-self example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #gridContainer
            {                    
                display: grid;
                grid-template-columns: 20% 1fr 20%;
                grid-template-rows: 100px  1fr;
                column-gap: 50px;
                row-gap: 20px;   
             
                place-items: end;
                                                
                width: 500px;
                height: 500px;
                border: thin solid #aaaaaa;
                background-color: #ffeeee; 
            }
            
            #gridContainer div
            {
                border: thin solid red;
                background-color: #ffffaa; 
                
                width: 50px;
                height: 50px;
            }    
            
            #one
            {
                place-self: start;                
            }
        </style>
    </head>
    
    <body>    
        <h5>Item "one" has been set to place-self: start</h5>
        <h5>All other items have been set to place-items: end</h5>
        <div id="gridContainer">
            <div id="one">One</div>
            <div>Two</div>
            <div>Three</div>
            <div>four</div>
            <div>Five</div>
            <div>Six</div>            
        </div>    
    </body>
</html>
 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>