Create a Tiles Layout Template using HTML and CSS Last Updated : 25 Jul, 2024 Summarize Suggest changes Share Like Article Like Report In this article, we will create a responsive Tiles layout template using HTML and CSS by structuring the HTML with headers, main content, and a footer. Utilize flexbox for a dynamic tiles container with individual tiles styled for responsiveness and hover effects.Tiles Layout refers to a web design where content is organized into distinct rectangular or square-shaped containers, often referred to as tiles. These tile layouts can be generated with the help of CSS Flexbox Property.PreviewApproachDeclare HTML structure with metadata, link external CSS, and create a main container.Design a header with a centered title, applying background color and padding.Set up a responsive tile container in the main section, utilizing flexbox for layout.Define global styles for the body, individual tile styling, and hover effects.Create a footer with centered content, a background color, and padding for a polished look.Example: In this example, we will design a tiles layout template by using HTML and CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Responsive Tiles Layout</title> </head> <body> <header> <h1>Responsive Tiles Layout Template</h1> </header> <main> <section class="tiles-container"> <div class="tile"> <h2>Tile 1</h2> <p> GeeksforGeeks is a leading platform that provides computer science resources and coding challenges for programmers and technology enthusiasts </p> </div> <div class="tile"> <h2>Tile 2</h2> <p> GeeksforGeeks is a leading platform that provides computer science resources and coding challenges for programmers and technology enthusiasts </p> </div> <div class="tile"> <h2>Tile 3</h2> <p> GeeksforGeeks is a leading platform that provides computer science resources and coding challenges for programmers and technology enthusiasts </p> </div> <div class="tile"> <h2>Tile 4</h2> <p> GeeksforGeeks is a leading platform that provides computer science resources and coding challenges for programmers and technology enthusiasts </p> </div> </section> </main> <footer> <p>© 2023 Responsive Tiles Layout</p> </footer> </body> </html> CSS /* style.css */ body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; } header { background-color: #333; color: #fff; text-align: center; padding: 20px; } main { max-width: 800px; margin: 20px auto; } .tiles-container { display: flex; flex-wrap: wrap; gap: 20px; } .tile { flex: 1 0 300px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px; border-radius: 10px; transition: transform 0.3s ease-in-out; } .tile:hover { transform: scale(1.05); } footer { background-color: #333; color: #fff; text-align: center; padding: 10px; } Output: Advertise with us Next Article Create a Split layout template using HTML and CSS W wankhedergnim Follow Similar Reads Create a Split layout template using HTML and CSS In this article, we will design a Split Layout Template that provides a responsive HTML and CSS webpage layout with a split-screen design, accommodating content in distinct left and right sections. The layout adapts to different screen sizes and features contrasting colors and subtle hover effects f 2 min read How to Create iPod Template using HTML and CSS ? The iPod template will create the look and feel of a classic iPod, with a sleek design and functional layout. The code creates a visually appealing iPod-like template with responsive design features and FontAwsome icons are used to enhance the look of the project. PreviewApproachFirst, create the st 3 min read Create a Blog Website Layout using HTML and CSS The Blog layout consists of a header, navigation menu, main content area, and footer. The header contains the website logo, name, and its tagline. The navigation menu is used to allow users to easily navigate through the different sections of the blog. The main content area contains the list of blog 4 min read How to Create a Website Using HTML and CSS? Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu 5 min read How to create a Portfolio Gallery using HTML and CSS ? The portfolio gallery is useful when your website contains different types of content or so much content. With the help of a portfolio gallery, you can easily display all the content on your front page to the user. To create a portfolio gallery we will need only HTML and CSS. We can use JavaScript a 4 min read Design a Google Chrome Page Template using HTML and CSS Google Chrome Page Template is a replica of Google Chrome Page which can be built with the help of HTML and CSS. This project has fundamental features and design elements, a search option, along with using the FontAwsome Icons, and various CSS styling, which offer you hands-on experience in web desi 4 min read Article Tags : Web Technologies Geeks Premier League Web Templates Geeks Premier League 2023 Like