Create a Tiles Layout Template using HTML and CSS
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
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 > w3wiki 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 > w3wiki 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 > w3wiki 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 > w3wiki 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.3 s ease-in-out; } .tile:hover { transform: scale( 1.05 ); } footer { background-color : #333 ; color : #fff ; text-align : center ; padding : 10px ; } |
Output:
Contact Us