Menu
Grids
Learn how to use the grid element and create custom grids
2 columns
![](https://d16bl9hbknyxy0.cloudfront.net/3f377ab1-96f7-454d-a721-009b1ceb985f/c695eaf2-8c19-4383-9785-7e939d3b8cf4/screen-shot-2022-01-03-at-3-33-02-pm.png?w=150&h=150&fit=inside&Expires=9223372036854775&Signature=ETG7B2ShtpYjwC-AP1wT4yo74alxSlm5rXyAvP622YruO203q87PE334fuw7MZhUBBLtTe9-aXW7o727w1cWTlTxu5LZwXXUBrYIhoG5PXw4pZjZTnZb-rN8XIla97nr0XAt9RBdGrAXkfQFiGbbu0lcb6uTYspElyqIKjdEl7T70FOZaLeXh85UdZSeQnqJF6BkCD537-I0B2WdPvc-yvXNy8p3Fd1Zmf44fTLkvc-Wpziq0~66w7CitEQDUZoiq44g1Sm-zPcsryyVyiSNKcc1DVFrt3Cmf4hgNO~ekZEmBA8M88WSmwNEv9nN7LIccRfCGWC8XQpFuC1qXjz0Eg__&Key-Pair-Id=K2SKI2Y48Y62V1)
3 columns
![](https://d16bl9hbknyxy0.cloudfront.net/3f377ab1-96f7-454d-a721-009b1ceb985f/6a0f121b-6cfc-45ce-8a3b-24931a53232c/screen-shot-2022-01-03-at-3-33-14-pm.png?w=150&h=150&fit=inside&Expires=9223372036854775&Signature=JJ601GfhFT5qmL5nstT6srnp4c0qYLy9rJ6qESRXv-42bJfallidw9HyeymrWcaGlpRWPcNkzXHZ3JbK5Bpzb4YlKv3RU6To-S6k716FyrhhDm3yRN8x8-9epu9VTwdOw9UX7Lpffeqx~eIU35JxJY6d71c8cgHpwRCt578Mx3vknVYJ6ZragiBEPjwiIowrVbOKE8JGirtksMvIcF7aY9XNi0h~W9pFBR4Z9o9wCNDYjA0s0KkQMtss5wSwXowDdTJU0ZJQVqWGB0ZrcQ0S0bcl-htBzy6RTdlVdrxFd6IYOOsJRzqXO79MHoICJ6d6ldxz8NuX7z6-r~~X7eAG0w__&Key-Pair-Id=K2SKI2Y48Y62V1)
4 columns
![](https://d16bl9hbknyxy0.cloudfront.net/3f377ab1-96f7-454d-a721-009b1ceb985f/7a742564-39ca-41b3-b225-e2fd36a2f7bd/screen-shot-2022-01-03-at-3-33-32-pm.png?w=150&h=150&fit=inside&Expires=9223372036854775&Signature=ti1EsuNBjlT4t2cCK6EKJJoJaa1XCh9ZZScA77ee75GEyZgmoIx6uI1ZYm25si9U6HyLEWpE2fFmA50KhN5owys8foO1us76pFleK4Mm9S-yKsJ7VeWpO4xGseB-dOk7cZIbJLB9oQOteyDp3oDen4gRS~Ojowya~sPhtEO1sTHfnDStY37zg8ixxkAlTJd1Af8Eh3xzMdcyK21GMg8RnT7cxig4BKrpCLRTMec~EUh8BKIyjTts4YSNlz-NhwhEWCVXyR~GsdlMB3X5slWJpRD3Oo~t0F4uU85G4Z4fbqj4eDaVBk4iTxfRX-vrcTtPSi5esoNggHMioDOQvQNmCg__&Key-Pair-Id=K2SKI2Y48Y62V1)
5 columns (custom)
![](https://d16bl9hbknyxy0.cloudfront.net/3f377ab1-96f7-454d-a721-009b1ceb985f/6560e7bc-8f53-47a1-958a-3bc101aa4ddb/screen-shot-2022-01-03-at-3-34-25-pm.png?w=150&h=150&fit=inside&Expires=9223372036854775&Signature=O7z-3bWgurkFIo18g1ys9m6WL0-L0zYL4JIHVB5RLMxot6YqnivH26nioaCjF7CAjwYnIRATdPNqVBUVryCcfDJMAiGCCMQumdDrPmlsJ8FmRazUrh4-84GCcz5BQ1nzu~u~WA5DCqHN6z51nU1HkLs8izgU6pMcexPLZiyi0Eb3FwyNDaSM1icTx~BtiVHUuFG2iOPn0OZ15WkBrppSKJQbr7UtittrEnzHCWMb25i0DJ5FToSaG3o9c0Rp~c6TkG8RCpaE7qvDZESJUZ08sBPNIDM4LUluIZN9Y4vcz0~P-sMLfjoS47fdmVvPfSMPt4JrE~zykrQcgKBB1nQHZA__&Key-Pair-Id=K2SKI2Y48Y62V1)
Can be used for any number of rows
6 columns
![](https://d16bl9hbknyxy0.cloudfront.net/3f377ab1-96f7-454d-a721-009b1ceb985f/8ed76be4-2415-4b23-a7ac-3cf16b133842/screen-shot-2022-01-03-at-3-35-41-pm.png?w=150&h=150&fit=inside&Expires=9223372036854775&Signature=ST6oDR8Xz5FBW9k2XzhbudplS2IRHefO7YRA597sHDMFFmrNP5kD-6BUfBBCZB4pFEuO6ORoNX1Ko3IBx6wpXmCz6g0UolKPJRcOPHJkphPOWMshC6TtaA6A2Yz2vM15YjvCuIdWfJQX5utX7U1F9e1E4AmBsCjmPumwyNh4uV9ZRcHLV-2Serjau6iEGrZaSpkyFkFzm9YEhwhjVWscBDQ5Se~09p6cZr4~Vbwyc97-HkEICsQ5uhcM25~GeSfziarv4eUDlOhWujSWCQM8nNqIHhbvfKNAyOcGB~PnGXDtv2VPaAUgF954KE8b6WAB1bA9QWAX3ziM8hSFtx3QxQ__&Key-Pair-Id=K2SKI2Y48Y62V1)
1 Static 1 Responsive
![](https://d16bl9hbknyxy0.cloudfront.net/3f377ab1-96f7-454d-a721-009b1ceb985f/380ee9f9-2587-443e-9dca-da197b2740b2/screen-shot-2022-01-03-at-3-36-51-pm.png?w=150&h=150&fit=inside&Expires=9223372036854775&Signature=eNlN01ZA~glto~j3YFVGqzwdjf5jsOY8rQ~iEWMvybNQJLPjofCcRXfHHK9wFVFFpr7W6lL33icynk4FviBXd4tWxzu~bOY7uTmqQ3D9uVJ2mNm6TXfE6KnidC4g2YSEF1fP~6esvCMxiKiInPIc70-8DWXReRAkbMC9VWaeQ9Bl5uwO6Z8Y~LwhaXfSm9XbJk1iGlayk4pFhxLpJIqASomoulxfqldUSaca2fxCg8SBQtWlJHdaxEue~7JROSRagwwYpv6c9dBj6-a8eGpwIbZJAg1zt3BF0dGqm0xOUM2QzZL~ijk5pKWkF~XEjTXuZnhUQmgzsmn5vxKiIX7RAg__&Key-Pair-Id=K2SKI2Y48Y62V1)
Masonry grid
![](https://d16bl9hbknyxy0.cloudfront.net/3f377ab1-96f7-454d-a721-009b1ceb985f/5c6e320b-ff02-454c-aac0-39334a2c8d3a/screen-shot-2022-01-03-at-3-32-47-pm.png?w=150&h=150&fit=inside&Expires=9223372036854775&Signature=gP2rlUaIKiGjl0aR763kDNQofTq2xPuU53u~Yosb4HiUFnxQ0fndlgwM3meQ4mc1xEh5HVCtFQFuoMf6Sswo1gCVOvwy8Ciw00g1OUzCl9xDPDXZ2BoVfyFrxgC~HzIfKNtcapXmHxxOiBEQswwZ2PKaoEVwFPUNWyQJczaas5BfUx-kDD7N6RECM-XVLSXLRqTENERn~ZvZgPXp47OS21ts-Whed2BY6YSQ09XykuvTAOFLion4aEL0Y-Nv4KVR1PMRMxmRxGleQCN590VGnGGoDPeb8RS3EjCmDQKImmTNCwxp~HnHcGvcM3wF~E88qusFZ7qIawx1B1CqehjCeg__&Key-Pair-Id=K2SKI2Y48Y62V1)
Small grid
![](https://d16bl9hbknyxy0.cloudfront.net/3f377ab1-96f7-454d-a721-009b1ceb985f/7abe471b-94c0-4f8f-b6d3-2381241d69c0/screen-shot-2022-01-03-at-3-38-05-pm.png?w=150&h=150&fit=inside&Expires=9223372036854775&Signature=NK6EVabrxzxZY5n8AiSm559YLBv7T64obvYx~2ZlOLJKSlPobykdDEHSsuTLIyWY6Eb5~BWGMz~V2S-XvxC5L6FrqUG8hrLBaUhw0aJkxyZQBZeEmzhZ568TE5pUzWblUK2WSnA6dscz02NVCLl2L~Wn5bDWK8uoGAB4Qzsh66pAojrU3p3~Wx8dQ3reqaJk6Q8F6vVTkcj25cnqJbM1IEKAd9Xj7dWmzNViaj4VpWRR5Y3qKzMIAgs5Xdkks1iaOk-ZYoqnjaPxboO5LewkThpL2vUg59Msme~k9IFKrN~h6IW0ezgnc1a4lJEZLiXwjugFXoQsNJZIaMGep3lIrA__&Key-Pair-Id=K2SKI2Y48Y62V1)
Making grids responsive
![](https://d16bl9hbknyxy0.cloudfront.net/3f377ab1-96f7-454d-a721-009b1ceb985f/7c8b0d01-0457-4caf-a025-81b548709fcb/screen-shot-2022-01-05-at-2-29-36-pm.png?w=150&h=150&fit=inside&Expires=9223372036854775&Signature=m3vE-OwfourIdH5SJBXYFC5feMZe170d68GYz1T~IiWfkURsraiAUNwhKXvWfSIKszFECQZDE7QmjfTVIjgN7EovXsMeNeFPAlRd1T-Z2Im2z0i3xXoxqnLCaPxlorYAOAPhAn5R~lSSTtWIJxiyUMNi2BtuyRt5ANA1pXnSxDm80SjjT5-7YEbXfYGUF-sHdwBenbghMMVJz8nq3JYrFrbJNFu6IyblMh7YXmPxzxUj-jY9ruOX2D0YqKjigcywk1DEVDWTA-MlnN4OAWr3V1asVDu81jAe5cvSC1o1Gi6VPY3o~fW6FzAFr1RYo~sMju8Dsh1bGBOj~Z7nyUSKAg__&Key-Pair-Id=K2SKI2Y48Y62V1)
Adding color to columns
![](https://d16bl9hbknyxy0.cloudfront.net/3f377ab1-96f7-454d-a721-009b1ceb985f/ad0773ed-4eb3-4bde-83d5-1802bb31581d/screen-shot-2022-01-05-at-2-31-54-pm.png?w=150&h=150&fit=inside&Expires=9223372036854775&Signature=kP0kvVjEftwUQU3TMWL7Jwu3PjuO7u6fdUEX2sboeEPgVe5tkD4sswGNuuSSA0oiTRZDu2kcac~k4Iu2GZAxhLKf~Z1A1mK8MAdm4xs2TDSj-p8Vd2JcW0uIbvKHST~5mRnod5J6J8cTtIXXACeCYxY-CHWXS31pM3KZKgSQffAK9u3Dxwy0DH0ZWEcU6~2IIwF7S6zQXPrvirLCL60IjxwpzdS4W6P2XL06b1Lczm-I9Y3113ZxVq7G0iX0p3O3dewojN7GhHBlBtSgfGlsqIQUFcE2hRx3wfyeAwAlc4ii9zHox2Hj1Q0Didb-x-EolnABqh1oOifOTqiAqoDkFg__&Key-Pair-Id=K2SKI2Y48Y62V1)
Alternating grids
![](https://d16bl9hbknyxy0.cloudfront.net/3f377ab1-96f7-454d-a721-009b1ceb985f/505ea0b0-1e39-4991-aba3-99cedb923d4e/screen-shot-2022-08-01-at-10-43-03-am.png?w=150&h=150&fit=inside&Expires=9223372036854775&Signature=oZItvxEbEvxhJq3OCf46HXKdzXW5dBpWgo32Gq3M2QV8G30sjJZ5fOoFRqNhrfVnL~RGq5xRUf-OLxP4LTopGqokRIn13xLNKBou~RAafxHDmZ3w8Gh5o3o8-T2Nx8aEh4UVWVQ8czsGKUo2RnVtYKSakLbCelnsz14iaO4t1s8p54oL5DitBnmS9KiolU1JQLQLn5-IhS20t-mRDdSc-VP7ItiYh66pyVp8ErgzLgvjuJJ5SHOLlnAQ3~nwsOwk0QAQjMtBmQw4TxSzPS0T1j8aqr2CvNowq2rrIq~AsVmB6AdMXVqTEwC11BTEDNVzxoKZyDh3wlOpcVzZ5iuEQg__&Key-Pair-Id=K2SKI2Y48Y62V1)