- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Building a Responsive Grid-View with CSS
You can try to run the following code to build a responsive grid-view:
Example
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> <style> * { box-sizing: border-box; } .header { border: 1px solid black; padding: 10px; } .leftmenu { width: 30%; float: left; padding: 10px; border: 1px solid black; } .content { width: 70%; float: left; padding: 10px; border: 2px dotted black; } </style> </head> <body> <div class = "header"> <h1>Header</h1> </div> <div class = "leftmenu"> <ul> <li>Menu One</li> <li>Menu Two</li> <li>Menu Three</li> <li>Menu Four</li> <li>Menu Five</li> <li>Menu Six</li> <li>Menu Seven</li> <li>Menu Eight</li> <li>Menu Nine</li> <li>Menu Ten</li> </ul> </div> <div class = "content"> <h1>Demo</h1> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </div> </body> </html>
- Related Articles
- How to create a responsive portfolio gallery grid with CSS?
- How to create a responsive Image Grid with HTML and CSS?
- Responsive grid with Bootstrap
- How to create a list grid view with CSS and JavaScript?
- Create a responsive pagination with CSS
- How to create a responsive header with CSS?
- How to create a responsive image with CSS?
- How to create a responsive form with CSS?
- How to create a responsive table with CSS?
- How to create a responsive "timeline" with CSS?
- How to create a responsive image gallery with CSS
- Create a responsive navigation menu with CSS Media Queries
- How to create a responsive login form with CSS?
- How to create a responsive checkout form with CSS?
- How to create a responsive inline form with CSS?

Advertisements