- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - Layouts
You have so far learnt about the various fundamentals of CSS which helps in styling text and the boxes that contain the content. In this chapter we will learn how to arrange and adjust these boxes in relation to the viewport.
Prerequisites
In order to proceed with learning of CSS layout, certain prequisites are essential, such as:
Having a basic knowledge of HTML.
Basic idea of the CSS fundamentals.
Understanding of how to style the boxes.
The chapter will list fundamental tools and techniques available for CSS layout. Let us look at each topic.
CSS Layout - Normal flow
This section explains about the normal flow of a webpage, where the elements position or lay themselves as per this flow. The normal flow is the basic ground for any changes that you intend to do.
A box model is applied to the individual elements, where padding, border, or margin are added to the content. A block-level element fills the available inline space of the parent element with its content, by default; whereas an inline-level element's size is same as its content's size. For the elements that have a display value of inline, you can set the width or height
In the normal layout flow, the block-level elements are positioned in the block flow direction, which is as per the parent's writing mode. Each block-level element will appear in a new line below the last line, separated by the specified margin.
The inline-level elements do not appear on a new line, rather they appear in the same line along with other text content, till the time they have space to be inside the width of the parent block level element. When there is no space left, then the content will fall into a new line.
CSS Layout - Flexbox
Laying out of elements in rows and columns, in a one-dimensional space, is taken care by the flexbox layout. In this layout the items or elements flex in order to fill the space and at the same time they may shrink to fit in the smaller spaces.
CSS Layout - Grids
Layout system of positioning elements in a two-dimensional space, is the responsibility of the grid layout. It helps in laying the content in rows and columns and make the whole building complex layout easy.
CSS Layout - Floats
CSS float is one of the commonly used property to create multiple column layouts on webpages, apart from using it to float images inside a container. But with flexbox and grid features, the float is restricted for the usage of floating images or text.
CSS Layout - Positioning
Positioning is a feature that determines the position or placement of elements on a webpage, which can be fixed or relative to a viewport.
CSS Layout - Multiple-column layout
This layout lets you lay the content in different columns, just like a newspaper.
CSS Layout - Responsive design
With the advance in the various devices, the screens are available in diverse sizes. The responsive web design (RWD) is helpful in allowing web pages to adjust their layout and display as per the different screen sizes, with varying widths and resolutions.
CSS Layout - Media queries
The Media Query provided by CSS are essential as they help in creation of different layouts based on the size of the viewport. A rule is specified via a media query and as the browser and device environment matches the rule, certain CSS gets applied. The media queries are also helpful in detecting other features of the environment, where your site is running.