CSS grid - grid-template-columns

The CSS property grid-template-columns defines both the names of lines and the sizing functions for the columns within a grid.

Possible values

  • none - It's a keyword that indicates the absence of an explicit grid structure. In this case, the columns are created implicitly and their size is determined by the grid-auto-columns property.

  • [line-name] - A <custom-ident> designates a name for the row positioned there. This identifier can be any valid string, with the exception of the reserved terms span and auto.

    Lines can have multiple names separated by spaces within the square brackets, such as [line-name-a line-name-b]

  • <length> - Is a non-negative length, giving the width of the column

  • <percentage> - This value is a non-negative <percentage> relative to the block size of the grid container. If the size of the grid container depends on its tracks, the percentage behaves like auto to determine the actual size of the container.

  • <flex> - This value is a non-negative dimension with the unit fr, which indicates the flex factor of the track. Each track that has a certain size takes up a portion of the remaining space based on its flex factor.

  • max-content - It's a keyword that specifies the maximum content contribution of the grid elements that occupy the grid track.

  • min-content - It's a keyword that specifies the largest minimum content contribution of the grid elements within the grid track.

  • minmax(min, max) - This function defines a size range, from min to max values. If the maximum value is smaller than the minimum value, the maximum value isn't taken into account and the function only uses the minimum value.

  • auto - The maximum value represents the largest maximum content size of the elements within the track. The minimum value specifies the largest minimum size of the elements, often the min-content size (specified by min-width/min-height).

  • fit-content( [ <length> | <percentage> ] ) - This formula, max(minimum, min(limit, max-content)), represents a calculation where minimum represents an automatic minimum (often but not always equal to the minimum of min-content), and limit represents the track resizing function passed as an argument to fit-content(). Essentially, it's the smaller value between minmax(auto, max-content) and minmax(auto, limit).

  • repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) - Represents a repeating section of the track list and allows numerous columns with a recurring pattern to be written in a more compressed manner.

  • subgrid - If set as subgrid, this means that the grid will inherit the spanned section of its parent grid along this axis. Instead of defining it explicitly, the rows/columns of the grid will be derived from the parent grid's definition.

Syntax

grid-template-columns = none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

Applies to

Grid containers.

CSS grid-template-columns - Using [line-names]

The following example demonstrates specifying grid columns using line names

<html>
<head>
<style>
   body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f0f8ff;
      font-family: 'Arial', sans-serif;
   }
   #container {
      display: grid;
      grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr;
      gap: 15px;
      max-width: 600px;
      width: 80vw;
      margin: auto;
   }
   #container > div {
      background-color: #ff9966;
      color: #fff;
      font-size: 1.2em;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
</style>
</head>
<body>
<div id="container">
   <div style="grid-column: col1 / col4;">Header Column</div>
   <div>Item One</div>
   <div>Item Two</div>
   <div>Item Three</div>
   <div>Item Four</div>
   <div>Item Five</div>
   <div>Item Six</div>
   <div>Item Seven</div>
   <div>Item Eight</div>
</div>
</body>
</html>

CSS grid-template-colums - Using <length>

The following example demonstrates specifying grid columns using length values

<html>
<head>
<style>
   body {
      background-color: #f8f8f8;
      font-family: 'Verdana', sans-serif;
      margin: 0;
      justify-content: center;
      align-items: center;
      height: 100vh;
   }
   #customGrid {
      height: 300px;
      display: grid;
      gap: 20px;
      background-color: #2ecc71;
      padding: 20px;
      grid-template-columns: 120px 180px 150px;
      border-radius: 15px;
   }
   #customGrid div {
      background-color: #3498db;
      color: #fff;
      text-align: center;
      padding: 30px 0;
      font-size: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
</style>
</head>
<body>
<h1>The grid-template-columns with Length Values</h1>
<div id="customGrid">
   <div class="boxA">Alpha</div>
   <div class="boxB">Beta</div>
   <div class="boxC">Gamma</div>
   <div class="boxD">Delta</div>
   <div class="boxE">Theta</div>
   <div class="boxF">Lambda</div>
</div>
</body>
</html>

CSS grid-template-colums - Using <percentage>

The following example demonstrates specifying grid columns using length value in percentage

<html>
<head>
<style>
   body {
      background-color: #f8f8f8;
      font-family: 'Verdana', sans-serif;
      margin: 0;
      justify-content: center;
      align-items: center;
      height: 100vh;
   }
   #customGrid {
      height: 300px;
      display: grid;
      gap: 20px;
      background-color: #e74c3c;
      padding: 20px;
      grid-template-columns: 20% 40% 20%;
      border-radius: 15px;
   }
   #customGrid div {
      background-color: #3498db;
      color: #fff;
      text-align: center;
      padding: 30px 0;
      font-size: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
</style>
</head>
<body>
<h1>The grid-template-columns with Percentage Values</h1>
<div id="customGrid">
   <div class="boxA">Alpha</div>
   <div class="boxB">Beta</div>
   <div class="boxC">Gamma</div>
   <div class="boxD">Delta</div>
   <div class="boxE">Theta</div>
   <div class="boxF">Lambda</div>
</div>
</body>
</html>

CSS grid-template-colums - Using <flex>

The following example demonstrates specifying grid columns using flex values in fr

<html>
<head>
<style>
   body {
      background-color: #f0f0f0;
      font-family: 'Arial', sans-serif;
      margin: 0;
      justify-content: center;
      align-items: center;
      height: 100vh;
   }
   #customGrid {
      height: 250px;
      display: grid;
      gap: 20px;
      background-color: #2ecc71;
      padding: 20px;
      grid-template-columns: 0.5fr 1fr 1.5fr;
      border-radius: 15px;
   }
   #customGrid div {
      background-color: #3498db;
      color: #fff;
      text-align: center;
      padding: 20px 0;
      font-size: 25px;
      border-radius: 5px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
   }
</style>
</head>
<body>
<h1>The grid-template-columns with Fractional Unit (fr) Values</h1>
<div id="customGrid">
   <div class="boxA">Alpha</div>
   <div class="boxB">Beta</div>
   <div class="boxC">Gamma</div>
   <div class="boxD">Delta</div>
   <div class="boxE">Theta</div>
   <div class="boxF">Lambda</div>
</div>
</body>
</html>

CSS grid-template-colums - Using max-content

The following example demonstrates specifying grid columns using max-content

<html>
<head>
<style>
   body {
      background-color: #f5f5f5;
      font-family: 'Arial', sans-serif;
      margin: 0;
      justify-content: center;
      align-items: center;
      height: 100vh;
   }
   #customGrid {
      height: 300px;
      display: grid;
      gap: 20px;
      background-color: #b0b5b3;
      padding: 20px;
      grid-template-columns: max-content max-content max-content;
      border-radius: 15px;
   }
   #customGrid div {
      background-color: #2980b9;
      color: #fff;
      text-align: center;
      padding: 20px;
      font-size: 16px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
   }
</style>
</head>
<body>
<h1>The grid-template-columns with max-content Values</h1>
<div id="customGrid">
   <div class="boxA">Alpha Element with some content</div>
   <div class="boxB">Beta Element</div>
   <div class="boxC">Gamma Element</div>
   <div class="boxD">Delta Element</div>
   <div class="boxE">Theta Element</div>
   <div class="boxF">Lambda Element some content</div>
</div>
</body>
</html>

CSS grid-template-colums - Using min-content

The following example demonstrates specifying grid columns using min-content

<html>
<head>
<style>
   body {
      background-color: #f4f4f4;
      font-family: 'Arial', sans-serif;
      margin: 0;
      justify-content: center;
      align-items: center;
      height: 100vh;
   }
   #customGrid {
      height: 300px;
      display: grid;
      gap: 20px;
      background-color: #c8cfcc;
      padding: 20px;
      grid-template-columns: min-content min-content min-content;
      border-radius: 15px;
   }
   #customGrid div {
      background-color: #2c3e50;
      color: #ecf0f1;
      text-align: center;
      padding: 20px;
      font-size: 16px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
</style>
</head>
<body>
<h1>The grid-template-columns with min-content Values</h1>
<div id="customGrid">
   <div class="boxA">Alpha Element with some content</div>
   <div class="boxB">Beta Element</div>
   <div class="boxC">Gamma Element</div>
   <div class="boxD">Delta Element</div>
   <div class="boxE">Theta Element</div>
   <div class="boxF">Lambda Element some content</div>
</div>
</body>
</html>

CSS grid-template-colums - Using minmax()

The following example demonstrates specifying grid columns using minmax()

<html>
<head>
<style>
   body {
      background-color: #f4f4f4;
      font-family: 'Arial', sans-serif;
      margin: 0;
      justify-content: center;
      align-items: center;
      height: 100vh;
   }
   #customGrid {
      height: 300px;
      display: grid;
      gap: 20px;
      background-color: #c8cfcc;
      padding: 20px;
      grid-template-columns: minmax(50px, 0.5fr) minmax(150px, 1fr) minmax(50px, 0.8fr);
      border-radius: 10px;
   }
   #customGrid div {
      background-color: #2c3e50;
      color: #ecf0f1;
      text-align: center;
      padding: 10px;
      font-size: 20px;
      border-radius: 5px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
</style>
</head>
<body>
<h1>The grid-template-columns with minmax(min, max) Values</h1>
<div id="customGrid">
   <div class="boxA">Alpha Element with some content</div>
   <div class="boxB">Beta Element</div>
   <div class="boxC">Gamma Element</div>
   <div class="boxD">Delta Element</div>
   <div class="boxE">Theta Element</div>
   <div class="boxF">Lambda Element some content</div>
</div>
</body>
</html>

CSS grid-template-columns - Using repeat()

The following example demonstrates specifying grid column sizes using repeat function.

<html>
<head>
<style>
   /* Apply styles to the grid container */
   #grid {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(4, 1fr); /* Four columns of equal width */
      grid-template-rows: 50px 100px 150px ; /* Three rows of different height */
      gap: 10px; /* Gap between grid items */
   }
   /* Styles for individual grid items */
   .area {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5em;
      color: white;
   }
   /* Specify background colors for different areas */
   #demo-areaA {
      background-color: #3498db; /* Blue */
      grid-column: 1 / span 2; /* Spans 2 columns */
      grid-row: 1 / span 1; /* Spans 1 row */
   }
   #demo-areaB {
      background-color: #e74c3c; /* Red */
      grid-column: 3 / span 2; /* Spans 2 columns */
      grid-row: 1 / span 1; /* Spans 1 row */
   }
   #demo-areaC {
      background-color: #2ecc71; /* Green */
      grid-column: 1 / span 4; /* Spans 4 columns */
      grid-row: 2 / span 1; /* Spans 1 row */
   }
   #demo-areaD {
      background-color: #f39c12; /* Orange */
      grid-column: 2 / span 1; /* Spans 1 column */
      grid-row: 3 / span 1; /* Spans 1 row */
   }
   #demo-areaE {
      background-color: #9b59b6; /* Purple */
      grid-column: 4 / span 1; /* Spans 1 column */
      grid-row: 3 / span 1; /* Spans 1 row */
   }
</style>
</head>
<body>
   <div id="grid">
      <div id="demo-areaA" class="area">One</div>
      <div id="demo-areaB" class="area">Two</div>
      <div id="demo-areaC" class="area">Three</div>
      <div id="demo-areaD" class="area">Four</div>
      <div id="demo-areaE" class="area">Five</div>
   </div>
</body>
</html>

CSS grid-template-colums - Using auto

In the following example, the grid container's column sizing is defined by the CSS rule grid-template-columns: auto auto auto;, which indicates that it should have three columns with an automatic width depending on the content within them.

This produces a grid layout in which the width of each column dynamically changes to accommodate the content.

<html>
<head>
<style>
   body {
      background-color: #F2F5F8;
      font-family: 'Arial', sans-serif;
   }
   #customGrid {
      height: 300px;
      display: grid;
      gap: 10px;
      background-color: #4CAF50;
      padding: 15px;
      grid-template-columns: auto auto auto;
   }
   #customGrid div {
      background-color: rgba(255, 255, 255, 0.9);
      text-align: center;
      padding: 30px 0;
      font-size: 24px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
</style>
</head>
<body>
<h1>The grid-template-colum</h1>
<div id="customGrid">
   <div class="boxA">Alpha</div>
   <div class="boxB">Beta</div>
   <div class="boxC">Gamma</div>
   <div class="boxD">Delta</div>
   <div class="boxE">Theta</div>
   <div class="boxF">Lambda</div>
</div>
</body>
</html>
Advertisements