How to make a grid with two columns where 1st column has 20% of width and 2nd one 80% width in Tailwind CSS ?

Last Updated : 07 May, 2023

Tailwind CSS simplifies the process of making complex UI designs. It has a lot of predefined styles in form of classes, which can be applied to any HTML element in the code. Also, one advantage of Tailwind CSS is that during the production build, it analyzes the HTML components, and removes any unused CSS, hence decreasing the overall size of the CSS files. This step is called purging. In this article, we’ll see how we can make a grid with two columns having widths of 20% and 80% respectively using Tailwind CSS.

There are a few related terms that we should know before getting into the actual concept:

grid: The CSS grid layout is a system of arrangement of elements inside a parent element. It is used to make a grid-based UI system, which can have multiple columns and rows with different heights and widths, without having to use other CSS properties.
grid-template-columns: It is a CSS property that specifies the number of columns in a grid layout and their widths.
vw, vh: These are units for expressing the length, 100vw would mean 100% of the viewport width, and 100vh would mean 100% of the viewport height.
fr: It stands for “Fractional Unit” and is also a unit of measurement in CSS. It is used to define what fraction of height or width should be taken up in a grid layout.

We have two divs that are arranged in a row using the grid layout, with the blue one having 20% of the width and the orange one having 80% of the width. We will implement 2 different approaches that we can use to achieve this result.

Approach 1: In this approach, the parent div has class-name as “grid” which is equivalent to putting “display: grid” in vanilla CSS. So, this step makes the parent have a display of type Grid, and then we define the inside divs properties. The children’s parents are assigned bg colors using the class “bg-{color}-{weight}” and height using the class “h-{height}”

Example: This example demonstrates the creation of the grid with two columns where the 1st column has 20% of the width and the 2nd one has 80% width using Tailwind CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Tailwind Grid 
    </title> 
  
    <script src= 
"https://cdn.tailwindcss.com"> 
    </script> 
</head> 
  
<body> 
    <h1 class="text-green-500  
               text-3xl text-center"> 
        GeeksforGeeks 
    </h1> 
    <div class="grid"> 
        <div class="bg-blue-500 row-start-1 
                    col-span-1 h-[60vh]"> 
        </div> 
        <div class="bg-orange-500 row-start-1  
                    col-span-4 h-[60vh]"> 
        </div> 
    </div> 
</body> 
  
</html>

Now, the main part comes in which helps with the layout. Here, “row-start-1” classes in both the divs mean the div will start from row 1 and will be in the same row. Thereafter, col-span-{value} determines the relative width that the div can take. In this example, we’ve assigned a column span of 1 to the first div and 4 to the second, which means that the second div would be 4 times wider than the first div. This is exactly what we’re trying to achieve anyways.

Output:

Approach 2: In this approach, we don’t make any style modifications inside the children’s divs, but only to the parent div. The part “[20vw_minmax(100vw,_1fr)_80vw]” is called an arbitrary value that can be passed to Tailwind CSS as custom classes. These are used if we can’t achieve our purpose with the predefined sets of values.

Example: This is another example that demonstrates the creation of a grid with two columns using Tailwind CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Tailwind Grid</title> 
    <script src= 
"https://cdn.tailwindcss.com"> 
    </script> 
  
</head> 
  
<body> 
    <h1 class="text-green-500  
               text-3xl text-center"> 
        GeeksforGeeks 
    </h1> 
    <div class="grid grid-cols-[20vw_minmax(100vw,_1fr)_80vw]"> 
        <div class="bg-blue-500  
                    h-[60vh]"> 
        </div> 
        <div class="bg-orange-500   
                    h-[60vh]"> 
        </div> 
    </div> 
</body> 
  
</html>

In this case, this sets the size of each column in the grid. The value inside the square brackets indicates that the size of each column should be 20vw by default, but should expand to fill the available space (1fr) up to a maximum of 100vw). If there is still additional space, the columns will shrink to a minimum of 80vw. And this is exactly what we need to achieve the following layout as we can see in the output.

Output:

Suggest improvement

How to Create Columns with the Same Height in Tailwind CSS ?

Share your thoughts in the comments