Source code css layout

CSS layout

At this point, we’ve looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it’s time to look at how to correctly arrange your boxes in relation to the viewport as well as to one another. We’ve covered the necessary prerequisites, so let’s dive deep into CSS layout, looking at such various features as: different display settings, positioning, modern layout tools like flexbox and CSS grid, and some of the legacy techniques you might still want to know about.

Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

Prerequisites

Before starting this module, you should already:

1. Have basic familiarity with HTML, as discussed in the Introduction to HTML module.
2. Be comfortable with CSS fundamentals, as discussed in Introduction to CSS.
3. Understand how to style boxes.

Note: If you are working on a computer/tablet/other device where you don’t have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

Guides

These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods by laying out a webpage.

This article will recap some of the CSS layout features we’ve already touched upon in previous modules — such as different display values — and introduce some of the concepts we’ll be covering throughout this module.

Elements on webpages lay themselves out according to normal flow — until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.

Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can test your flexbox skills to check your understanding before moving on.

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then test your grid skills before moving on.

Originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.

Positioning allows you to take elements out of the normal document layout flow and make them behave differently, for example, by sitting on top of one another, or by always remaining in the same place inside the browser viewport. This article explains the different position values and how to use them.

The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.

As more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (RWD) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. It is an idea that changed the way we design for a multi-device web, and in this article we’ll help you understand the main techniques you need to know to master it.

The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example, «viewport is wider than 480 pixels». Media queries are a key part of responsive web design because they allow you to create different layouts depending on the size of the viewport. They can also be used to detect other features of the environment your site is running on, for example, whether the user is using a touchscreen rather than a mouse. In this lesson, you will first learn about the syntax used in media queries, and then you will use them in an interactive example showing how a simple design might be made responsive.

Grid systems are a very common feature used in CSS layouts. Prior to CSS Grid Layout, they tended to be implemented using floats or other layout features. You’d first imagine your layout as a set number of columns (e.g., 4, 6, or 12), and then you’d fit your content columns inside these imaginary columns. In this article, we’ll explore how these older methods work so that you understand how they were used if you work on an older project.

In this module, we recommend using Flexbox and Grid as the main layout methods for your designs. However, there are bound to be visitors to a site you develop in the future who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritize different features. This article explains how to use modern web techniques without excluding users of older technology.

Assessments

The following assessment will test your understanding of the CSS layout methods covered in the guides above.

An assessment to test your knowledge of different layout methods by laying out a webpage.

See also

This article shows how to build some real-world examples to illustrate what kinds of things you can do with positioning.

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used and the choices you can make as a developer.

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

CSS Website Layout

A website is often divided into headers, menus, content and a footer:

There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial.

Header

A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:

Example

Header

Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website:

Example

/* The navbar container */
.topnav overflow: hidden;
background-color: #333;
>

/* Navbar links */
.topnav a float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* Links — change color on hover */
.topnav a:hover background-color: #ddd;
color: black;
>

Content

The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the following:

• 1-column (often used for mobile browsers)
• 2-column (often used for tablets and laptops)
• 3-column layout (only used for desktops)

We will create a 3-column layout, and change it to a 1-column layout on smaller screens:

Example

/* Create three equal columns that float next to each other */
.column float: left;
width: 33.33%;
>

/* Clear floats after the columns */
.row:after content: «»;
display: table;
clear: both;
>

/* Responsive layout — makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) .column width: 100%;
>
>

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Tip: To create a 2-column layout, change the width to 50%. To create a 4-column layout, use 25%, etc.

Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter.

Tip: A more modern way of creating column layouts, is to use CSS Flexbox. However, it is not supported in Internet Explorer 10 and earlier versions. If you require IE6-10 support, use floats (as shown above).

To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

Unequal Columns

The main content is the biggest and the most important part of your site.

It is common with unequal column widths, so that most of the space is reserved for the main content. The side content (if any) is often used as an alternative navigation or to specify information relevant to the main content. Change the widths as you like, only remember that it should add up to 100% in total:

Example

/* Left and right column */
.column.side width: 25%;
>

/* Middle column */
.column.middle width: 50%;
>

/* Responsive layout — makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) .column.side, .column.middle width: 100%;
>
>

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Footer

The footer is placed at the bottom of your page. It often contains information like copyright and contact info:

Example

Responsive Website Layout

By using some of the CSS code above, we have created a responsive website layout, which varies between two columns and full-width columns depending on screen width:

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!

License

phuocng/csslayout

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

A collection of popular layouts and patterns made with CSS:

• 🎉 Zero dependencies
• 🎉 No frameworks
• 🎉 No CSS hacks
• 🎉 Real use cases
• Good practices (coming soon)
• Accessibility Support (coming soon)

Being a front-end engineer, I have to deal with a lot of layouts and components. There are a lot of CSS frameworks out there that provide popular layouts/components but I usually don’t want to include all of them in my project.

So I collect most popular layouts and components that can be built with pure CSS. They are powered by modern CSS features such as flexbox and grid.

They are great starting points to be picked and customized easily for each specific need. By composing them, you can have any possible layout that exists in the real life.

$ git clone https://github.com/phuocng/csslayout

$ cd csslayout $ npm install

Visit http://localhost:8081 to see it in action.

PRs are welcomed. If you think there are any missing useful layouts or patterns, please create an issue or submit a PR.

It’s important to note that you should run the following command to lint the code:

If there is any issue, it will be logged in the tslint.log file.

This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.

About

A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!

Источник