Create a Tiles Layout Template using HTML and CSS

Last Updated : 25 Jul, 2024

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.

Preview

Screenshot-2023-12-18-102058

Approach

Declare 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>&copy; 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:

Create a Tiles Layout Template using HTML and CSS

wankhedergnim

Improve

Article Tags :

Create a Tiles Layout Template using HTML and CSS

Preview

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?