[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fblog\u002Ftailwind-css-make-grid-different-width-columns":3,"$fJiJRnye2NXw8CHxpKPFHFeuFj_thfALRjHYsXouAXZ8":489,"i-local-icon:calendar-days":492,"i-local-icon:tag":497,"i-local-icon:eye":499},{"id":4,"title":5,"body":6,"categories_slug":477,"comment_count":480,"date_published":481,"description":482,"extension":483,"meta":484,"navigation":125,"path":485,"seo":486,"stem":487,"__hash__":488},"content\u002Fblog\u002F11.tailwind-css-make-grid-different-width-columns.md","Tailwind CSS - How to make a grid with different width columns",{"type":7,"value":8,"toc":471},"minimark",[9,13,18,23,27,30,36,40,43,173,177,184,268,271,365,369,375,467],[10,11,5],"h1",{"id":12},"tailwind-css-how-to-make-a-grid-with-different-width-columns",[14,15],"meta-card",{":categories":16,":date":17},"categories_slug","date_published",[19,20,22],"h2",{"id":21},"overview","Overview",[24,25,26],"p",{},"Tailwind CSS has become a popular choice among developers for its simplicity and flexibility in building responsive and stylish user interfaces.",[24,28,29],{},"In this blog post, we'll explore how to create a two-column grid as an example using Tailwind CSS, where the first column takes up 20% of the width, and the second column occupies the remaining 80% using 3 different methods to accomplish this.",[24,31,32],{},[33,34,35],"strong",{},"Note: You can use these same methods to achieve any number of columns with any width percentages that you wish.",[19,37,39],{"id":38},"option-1-using-the-col-span-method","Option 1 - Using the col-span method",[24,41,42],{},"In this example we want to achieve a 20% \u002F 80% split. So to do that, set the number of grid columns to 5. Then you can set the first column to span 1 grid column, and the second column to span 4 grid columns.",[44,45,50],"pre",{"className":46,"code":47,"language":48,"meta":49,"style":49},"language-html shiki shiki-themes github-dark","\u003Cdiv class=\"grid grid-cols-5 gap-4\">\n  \u003C!-- First Column (20% width) -->\n  \u003Cdiv class=\"col-span-1 bg-gray-300 p-4\">\n    \u003C!-- Content -->\n  \u003C\u002Fdiv>\n\n  \u003C!-- Second Column (80% width) -->\n  \u003Cdiv class=\"col-span-4 bg-gray-500 p-4\">\n    \u003C!-- Content -->\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html","",[51,52,53,80,87,104,110,120,127,133,149,154,163],"code",{"__ignoreMap":49},[54,55,58,62,66,70,73,77],"span",{"class":56,"line":57},"line",1,[54,59,61],{"class":60},"s95oV","\u003C",[54,63,65],{"class":64},"s4JwU","div",[54,67,69],{"class":68},"svObZ"," class",[54,71,72],{"class":60},"=",[54,74,76],{"class":75},"sU2Wk","\"grid grid-cols-5 gap-4\"",[54,78,79],{"class":60},">\n",[54,81,83],{"class":56,"line":82},2,[54,84,86],{"class":85},"sAwPA","  \u003C!-- First Column (20% width) -->\n",[54,88,90,93,95,97,99,102],{"class":56,"line":89},3,[54,91,92],{"class":60},"  \u003C",[54,94,65],{"class":64},[54,96,69],{"class":68},[54,98,72],{"class":60},[54,100,101],{"class":75},"\"col-span-1 bg-gray-300 p-4\"",[54,103,79],{"class":60},[54,105,107],{"class":56,"line":106},4,[54,108,109],{"class":85},"    \u003C!-- Content -->\n",[54,111,113,116,118],{"class":56,"line":112},5,[54,114,115],{"class":60},"  \u003C\u002F",[54,117,65],{"class":64},[54,119,79],{"class":60},[54,121,123],{"class":56,"line":122},6,[54,124,126],{"emptyLinePlaceholder":125},true,"\n",[54,128,130],{"class":56,"line":129},7,[54,131,132],{"class":85},"  \u003C!-- Second Column (80% width) -->\n",[54,134,136,138,140,142,144,147],{"class":56,"line":135},8,[54,137,92],{"class":60},[54,139,65],{"class":64},[54,141,69],{"class":68},[54,143,72],{"class":60},[54,145,146],{"class":75},"\"col-span-4 bg-gray-500 p-4\"",[54,148,79],{"class":60},[54,150,152],{"class":56,"line":151},9,[54,153,109],{"class":85},[54,155,157,159,161],{"class":56,"line":156},10,[54,158,115],{"class":60},[54,160,65],{"class":64},[54,162,79],{"class":60},[54,164,166,169,171],{"class":56,"line":165},11,[54,167,168],{"class":60},"\u003C\u002F",[54,170,65],{"class":64},[54,172,79],{"class":60},[19,174,176],{"id":175},"option-2-defining-additional-widths-in-tailwindconfigjs","Option 2 - Defining additional widths in tailwind.config.js",[24,178,179,180,183],{},"You can define additional grid widths by extending the theme in ",[51,181,182],{},"tailwind.config.js"," as shown below:",[44,185,189],{"className":186,"code":187,"language":188,"meta":49,"style":49},"language-bash shiki shiki-themes github-dark","# tailwind.config.js\n\nmodule.exports = {\n  theme: {\n    extend: {\n      gridTemplateColumns:\n      {\n        '20\u002F80': '20% 80%',\n      }\n    }\n  }\n}\n","bash",[51,190,191,196,200,211,218,225,230,235,247,252,257,262],{"__ignoreMap":49},[54,192,193],{"class":56,"line":57},[54,194,195],{"class":85},"# tailwind.config.js\n",[54,197,198],{"class":56,"line":82},[54,199,126],{"emptyLinePlaceholder":125},[54,201,202,205,208],{"class":56,"line":89},[54,203,204],{"class":68},"module.exports",[54,206,207],{"class":75}," =",[54,209,210],{"class":75}," {\n",[54,212,213,216],{"class":56,"line":106},[54,214,215],{"class":68},"  theme:",[54,217,210],{"class":75},[54,219,220,223],{"class":56,"line":112},[54,221,222],{"class":68},"    extend:",[54,224,210],{"class":75},[54,226,227],{"class":56,"line":122},[54,228,229],{"class":68},"      gridTemplateColumns:\n",[54,231,232],{"class":56,"line":129},[54,233,234],{"class":60},"      {\n",[54,236,237,240,244],{"class":56,"line":135},[54,238,239],{"class":68},"        '20\u002F80'",[54,241,243],{"class":242},"sDLfK",":",[54,245,246],{"class":75}," '20% 80%',\n",[54,248,249],{"class":56,"line":151},[54,250,251],{"class":60},"      }\n",[54,253,254],{"class":56,"line":156},[54,255,256],{"class":60},"    }\n",[54,258,259],{"class":56,"line":165},[54,260,261],{"class":60},"  }\n",[54,263,265],{"class":56,"line":264},12,[54,266,267],{"class":60},"}\n",[24,269,270],{},"You can then select that tailwind class and apply it to your html as shown:",[44,272,274],{"className":46,"code":273,"language":48,"meta":49,"style":49},"\u003Cdiv class=\"grid-cols-20\u002F80 grid gap-4\">\n  \u003C!-- First Column (20% width) -->\n  \u003Cdiv class=\"bg-gray-300 p-4\">\n    \u003C!-- Content -->\n  \u003C\u002Fdiv>\n\n  \u003C!-- Second Column (80% width) -->\n  \u003Cdiv class=\"bg-gray-500 p-4\">\n    \u003C!-- Content -->\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[51,275,276,291,295,310,314,322,326,330,345,349,357],{"__ignoreMap":49},[54,277,278,280,282,284,286,289],{"class":56,"line":57},[54,279,61],{"class":60},[54,281,65],{"class":64},[54,283,69],{"class":68},[54,285,72],{"class":60},[54,287,288],{"class":75},"\"grid-cols-20\u002F80 grid gap-4\"",[54,290,79],{"class":60},[54,292,293],{"class":56,"line":82},[54,294,86],{"class":85},[54,296,297,299,301,303,305,308],{"class":56,"line":89},[54,298,92],{"class":60},[54,300,65],{"class":64},[54,302,69],{"class":68},[54,304,72],{"class":60},[54,306,307],{"class":75},"\"bg-gray-300 p-4\"",[54,309,79],{"class":60},[54,311,312],{"class":56,"line":106},[54,313,109],{"class":85},[54,315,316,318,320],{"class":56,"line":112},[54,317,115],{"class":60},[54,319,65],{"class":64},[54,321,79],{"class":60},[54,323,324],{"class":56,"line":122},[54,325,126],{"emptyLinePlaceholder":125},[54,327,328],{"class":56,"line":129},[54,329,132],{"class":85},[54,331,332,334,336,338,340,343],{"class":56,"line":135},[54,333,92],{"class":60},[54,335,65],{"class":64},[54,337,69],{"class":68},[54,339,72],{"class":60},[54,341,342],{"class":75},"\"bg-gray-500 p-4\"",[54,344,79],{"class":60},[54,346,347],{"class":56,"line":151},[54,348,109],{"class":85},[54,350,351,353,355],{"class":56,"line":156},[54,352,115],{"class":60},[54,354,65],{"class":64},[54,356,79],{"class":60},[54,358,359,361,363],{"class":56,"line":165},[54,360,168],{"class":60},[54,362,65],{"class":64},[54,364,79],{"class":60},[19,366,368],{"id":367},"option-3-using-arbitrarydynamic-values-with-the-jit-compiler","Option 3 - Using arbitrary\u002Fdynamic values with the JIT compiler",[24,370,371,372,374],{},"With the introduction of the JIT compiler (introduced in version 2.1+) and the ability to use arbitrary\u002Fdynamic values in some utilities, you can now do this without having to modify the ",[51,373,182],{}," file:",[44,376,378],{"className":46,"code":377,"language":48,"meta":49,"style":49},"\u003Cdiv class=\"grid grid-cols-[20%_80%] gap-4\">\n  \u003C!-- First Column (20% width) -->\n  \u003Cdiv class=\"bg-gray-300 p-4\">\n    \u003C!-- Content -->\n  \u003C\u002Fdiv>\n\n  \u003C!-- Second Column (80% width) -->\n  \u003Cdiv class=\"bg-gray-500 p-4\">\n    \u003C!-- Content -->\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[51,379,380,395,399,413,417,425,429,433,447,451,459],{"__ignoreMap":49},[54,381,382,384,386,388,390,393],{"class":56,"line":57},[54,383,61],{"class":60},[54,385,65],{"class":64},[54,387,69],{"class":68},[54,389,72],{"class":60},[54,391,392],{"class":75},"\"grid grid-cols-[20%_80%] gap-4\"",[54,394,79],{"class":60},[54,396,397],{"class":56,"line":82},[54,398,86],{"class":85},[54,400,401,403,405,407,409,411],{"class":56,"line":89},[54,402,92],{"class":60},[54,404,65],{"class":64},[54,406,69],{"class":68},[54,408,72],{"class":60},[54,410,307],{"class":75},[54,412,79],{"class":60},[54,414,415],{"class":56,"line":106},[54,416,109],{"class":85},[54,418,419,421,423],{"class":56,"line":112},[54,420,115],{"class":60},[54,422,65],{"class":64},[54,424,79],{"class":60},[54,426,427],{"class":56,"line":122},[54,428,126],{"emptyLinePlaceholder":125},[54,430,431],{"class":56,"line":129},[54,432,132],{"class":85},[54,434,435,437,439,441,443,445],{"class":56,"line":135},[54,436,92],{"class":60},[54,438,65],{"class":64},[54,440,69],{"class":68},[54,442,72],{"class":60},[54,444,342],{"class":75},[54,446,79],{"class":60},[54,448,449],{"class":56,"line":151},[54,450,109],{"class":85},[54,452,453,455,457],{"class":56,"line":156},[54,454,115],{"class":60},[54,456,65],{"class":64},[54,458,79],{"class":60},[54,460,461,463,465],{"class":56,"line":165},[54,462,168],{"class":60},[54,464,65],{"class":64},[54,466,79],{"class":60},[468,469,470],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":49,"searchDepth":82,"depth":82,"links":472},[473,474,475,476],{"id":21,"depth":82,"text":22},{"id":38,"depth":82,"text":39},{"id":175,"depth":82,"text":176},{"id":367,"depth":82,"text":368},[478,479],"css","tailwind",null,"2024-01-04","Explore how to create a two-column grid as an example using Tailwind CSS, where the first column takes up 20% of the width, and the second column occupies the remaining 80% using 3 different methods to accomplish this.","md",{},"\u002Fblog\u002Ftailwind-css-make-grid-different-width-columns",{"title":5,"description":482},"blog\u002F11.tailwind-css-make-grid-different-width-columns","WvmmrcOGL5RxTwBkTm6HrTcMzPdKvu6Ml36phfYk6yg",[490],{"id":165,"name":485,"count":491},23435,{"left":493,"top":493,"width":494,"height":494,"rotate":493,"vFlip":495,"hFlip":495,"body":496},0,24,false,"\u003Cpath\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\"\n    d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12zM12 15h.008v.008H12zm0 2.25h.008v.008H12zM9.75 15h.008v.008H9.75zm0 2.25h.008v.008H9.75zM7.5 15h.008v.008H7.5zm0 2.25h.008v.008H7.5zm6.75-4.5h.008v.008h-.008zm0 2.25h.008v.008h-.008zm0 2.25h.008v.008h-.008zm2.25-4.5h.008v.008H16.5zm0 2.25h.008v.008H16.5z\" \u002F>",{"left":493,"top":493,"width":494,"height":494,"rotate":493,"vFlip":495,"hFlip":495,"body":498},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.1 18.1 0 0 0 5.224-5.223c.54-.827.368-1.908-.33-2.607l-9.583-9.58A2.25 2.25 0 0 0 9.568 3\" \u002F>\n    \u003Cpath d=\"M6 6h.008v.008H6z\" \u002F>\n  \u003C\u002Fg>",{"left":493,"top":493,"width":494,"height":494,"rotate":493,"vFlip":495,"hFlip":495,"body":500},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M2.036 12.322a1 1 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178c.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178\" \u002F>\n    \u003Cpath d=\"M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0\" \u002F>\n  \u003C\u002Fg>"]