CSS Grid
Generator

Without Code Create Grid Box Layouts

CSS Grid Generator is a free tool that allows you to create various layouts for your projects by adjusting options. You can generate different grid layouts without coding knowledge, and it will instantly show you the output. The tool provides HTML and CSS code for your changes, which you can easily copy and paste into your project.

Responsive Layout

Equal Height Option

Grid Item Span

Generated HTML:


		

        

		  
Generated CSS:

		  

		

    

	

		
Output:

	  

	


    
\n`;
      }
      generatedHtml += '
';

      // Display generated HTML
      htmlCode.textContent = generatedHtml;

      // Generate responsive CSS
      let generatedCss = `
.grid-output {
  display: grid;
  grid-template-rows: repeat(${rows}, 1fr);
  grid-template-columns: repeat(${columns}, 1fr);
  gap: ${gap}px;
}

.grid-output div {
  background-color: lightgray;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}`;

      // Add column and row spans for multiple items
      spanItems.forEach(item => {
        generatedCss += `
.grid-output div:nth-child(${item}) {
  grid-column: span 2;
}`;
      });

      rowSpanItems.forEach(item => {
        generatedCss += `
.grid-output div:nth-child(${item}) {
  grid-row: span 2;
}`;
      });

      // Add equal height option to CSS
      if (equalHeight) {
        generatedCss += `
.grid-output div {
  height: 100px;
}`;

        // Adjust height for items spanning two rows
        rowSpanItems.forEach(item => {
          generatedCss += `
.grid-output div:nth-child(${item}) {
  height: calc(200px + ${gap}px);
}`;
        });
      }

      // Add responsive layout
      generatedCss += `
/* Tablet Layout - 768px */
@media (max-width: 768px) {
  .grid-output {
    grid-template-columns: repeat(${columnsTablet}, 1fr);
  }
}

/* Mobile Layout - 480px */
@media (max-width: 480px) {
  .grid-output {
    grid-template-columns: repeat(${columnsMobile}, 1fr);
  }
}`;
      cssCode.textContent = generatedCss;
    }

    // Generate grid initially to set default values
    generateGrid();
    
    


						

				

					

				
				
		
		

					

			


	



	

	

		

	

				
			
























 



	
Frontend Hack

	
	
	
© Copyright  2025 all rights reserved | Design By Frontend-Hack