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.
<!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 >
|
/* 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: