Table of contents
- CSS Positions
- static
- relative
- absolute
- fixed
- Sticky
- CSS Grid
- Important CSS Grid Terminology:
- Grid Container
- Grid Items
- display
- grid-column-start, grid-column-end, grid-row-start, grid-row-end
- grid-template-columns, grid-template-rows:
- justify-self
- align-self
- justify-items
- align-items
- justify-content
- align-content
- Media Queries
CSS Positions
The position property can help you in manipulating the position of the element on the web page. The below are the positions available in CSS.*
Syntax:
position: static;
position: relative;
position: absolute;
position: sticky;
position: fixed;
static
The element is positioned according to the normal flow of the document. This is the default value for the position. The top, right, bottom and z-index values don't have any effect on the web page with static position
Syntax:
position: static;
relative
*The element is positioned according to the normal flow of document and then the element is positioned relative to its original position with amount of pixels defined and the direction mentioned. This offset doesn't effect other elements position. *
Syntax:
position: relative;
Example:
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
* {
box-sizing: border-box;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
background: blue;
color: white;
position: relative;
top: 20px;
left: 20px;
}
absolute
The element is removed from normal document flow, and no space is created for the element in the page layout. The element moves in specified direction and position relative to its nearest parent element if any or is placed relative to its initial container block.
<h1>Absolute positioning</h1>
<p>
I am a basic block level element. My adjacent block level elements sit on new
lines below me.
</p>
<p class="positioned">
By default we span 100% of the width of our parent element, and we are as tall
as our child content. Our total width and height is our content + padding +
border width/height.
</p>
<p>
We are separated by our margins. Because of margin collapsing, we are
separated by the width of one of our margins, not both.
</p>
<p>
inline elements <span>like this one</span> and <span>this one</span> sit on
the same line as one another, and adjacent text nodes, if there is space on
the same line. Overflowing inline elements
<span>wrap onto a new line if possible — like this one containing text</span>,
or just go on to a new line if not, much like this image will do:
<img src="long.jpg" />
</p>
* {
box-sizing: border-box;
}
body {
width: 500px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
fixed
*The element with position fixed is placed at the specified place and doesn't move from its position even after scrolling the webpage. It remains fixed in the place specified. *
<div class="outer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
ultrices ultrices, tempor et tellus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
ultrices ultrices, tempor et tellus.
</p>
<div class="box" id="one">One</div>
</div>
* {
box-sizing: border-box;
}
.box {
width: 100px;
height: 100px;
background: red;
color: white;
}
#one {
position: fixed;
top: 80px;
left: 10px;
background: blue;
}
.outer {
width: 500px;
height: 300px;
overflow: scroll;
padding-left: 150px;
}
Sticky
*A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. *
<dl>
<div>
<dt>A</dt>
<dd>Andrew W.K.</dd>
<dd>Apparat</dd>
<dd>Arcade Fire</dd>
<dd>At The Drive-In</dd>
<dd>Aziz Ansari</dd>
</div>
<div>
<dt>C</dt>
<dd>Chromeo</dd>
<dd>Common</dd>
<dd>Converge</dd>
<dd>Crystal Castles</dd>
<dd>Cursive</dd>
</div>
<div>
<dt>E</dt>
<dd>Explosions In The Sky</dd>
</div>
<div>
<dt>T</dt>
<dd>Ted Leo & The Pharmacists</dd>
<dd>T-Pain</dd>
<dd>Thrice</dd>
<dd>TV On The Radio</dd>
<dd>Two Gallants</dd>
</div>
</dl>
* {
box-sizing: border-box;
}
dl > div {
background: #fff;
padding: 24px 0 0 0;
}
dt {
background: #b8c1c8;
border-bottom: 1px solid #989ea4;
border-top: 1px solid #717d85;
color: #fff;
font: bold 18px/21px Helvetica, Arial, sans-serif;
margin: 0;
padding: 2px 0 0 12px;
position: -webkit-sticky;
position: sticky;
top: -1px;
}
dd {
font: bold 20px/45px Helvetica, Arial, sans-serif;
margin: 0;
padding: 0 0 0 12px;
white-space: nowrap;
}
dd + dd {
border-top: 1px solid #ccc;
}
CSS Grid
CSS Grid is a life-changing tool for creating web layouts. It helps you make both simple and complex layouts. The main difference is that while Flexbox helps with one-dimensional arrangement of elements, CSS grid is able to do two-dimensional arrangements.
The concept of axes we learnt under flexbox still applies here. You can use CSS Grid to arrange elements on the main axis and cross axis at the same time.
In summary, Flexbox, allows you to either arrange elements horizontally in a row or vertically in a column. But with CSS Grid you can align elements both vertically and horizontally.
The CSS Grid layout is declared only on parent elements or containers. In effect, all its children become grid items. Once you have the target container, you give it an attribute of display and value of grid. The size of a grid's row and column can be determined with grid-template-rows and grid-template-columns respectively.
Important CSS Grid Terminology:
Grid Container
The element on which display: grid
is applied. It’s the direct parent of all the grid items. In this example container
is the grid container.
<div class="container">
<div class="item item1>One</div>
<div class="item item2>Two</div>
<div class="item item3>Three</div>
</div>
Grid Items
The children (i.e. direct descendants) of the grid container. Here the item
elements are grid items, but sub-item
isn’t.
<div class="container">
<div class="item"> </div>
<div class="item">
<p class="sub-item"> </p>
</div>
<div class="item"> </div>
</div>
display
Defines the element as a grid container and establishes a new grid formatting context for its contents.
grid
– generates a block-level gridinline-grid
– generates an inline-level grid
.container {
display: grid | inline-grid;
}
grid-column-start, grid-column-end, grid-row-start, grid-row-end
Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-start
/grid-row-start
is the line where the item begins, and grid-column-end
/grid-row-end
is the line where the item ends.
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}
grid-template-columns, grid-template-rows:
Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
justify-self
Aligns a grid item inside a cell along the inline (row) axis (as opposed to align-self
which aligns along the block (column) axis). This value applies to a grid item inside a single cell.
.item {
justify-self: start | end | center | stretch;
}
align-self
Aligns a grid item inside a cell along the block (column) axis (as opposed to justify-self
which aligns along the inline (row) axis). This value applies to the content inside a single grid item.
.item {
align-self: start | end | center | stretch;
}
column-gap, row-gap, grid-column-gap, grid-row-gap:
Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
column-gap: 10px;
row-gap: 15px;
}
justify-items
Aligns grid items along the inline (row) axis (as opposed to align-items
which aligns along the block (column) axis). This value applies to all grid items inside the container.
.container {
justify-items: start | end | center | stretch;
}
align-items
Aligns grid items along the block (column) axis (as opposed to justify-items
which aligns along the inline (row) axis). This value applies to all grid items inside the container.
.container {
align-items: start | end | center | stretch;
}
justify-content
Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px
. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the inline (row) axis (as opposed to align-content
which aligns the grid along the block (column) axis).
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
align-content
Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px
. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the block (column) axis (as opposed to justify-content
which aligns the grid along the inline (row) axis).
.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
Media Queries
For the sake of users who want to access the landing page on mobile, we have to make our project accessible on smaller screens. In our case, we are looking at screens that are greater than 300px but less that 480px.
@media(min-width: 300px) and (max-width: 480px) {
* {
font-size: 1rem;
}
body{
height: 100vh;
width: 100vw;
overflow-y: hidden;
overflow-x: hidden;
}
nav{
margin: 0 1.5rem 0 1.5rem;
}
nav ul {
display: none;
}
.mobile-nav {
display: block;
margin-right: 2rem;
}
main{
display: grid;
grid-template-columns: 100%;
margin: 0 auto;
}
.client-logos {
margin-top: 2rem;
}
.desktop-logos {
display: none;
}
.mobile-logos {
display: block;
}
.desktop-img {
display: none;
}
.mobile-img {
display: block;
margin-top: 3rem;
}
.cta-btns,
.menu-items {
display: none;
}
main h1{
font-size: 2.5rem;
}
.clients-logos img {
width: 4.5rem;
margin-right: 0.8rem;
}
.attribution {
width: 13rem;
margin: 8rem auto 0 auto;
text-align: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&family=Poppins:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<title>Web Layout | Landing Page</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
</head>
<body>
<nav>
<div class="logos-section">
<h2 class="logo">snap</h2>
<ul class="menu-items">
<li>
Features<svg
width="10"
height="6"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke="#686868"
stroke-width="1.5"
fill="none"
d="m1 1 4 4 4-4"
/>
</svg>
</li>
<li>
Company<svg
width="10"
height="6"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke="#686868"
stroke-width="1.5"
fill="none"
d="m1 1 4 4 4-4"
/>
</svg>
</li>
<li>Careers</li>
<li>About</li>
</ul>
</div>
<ul class="cta-btns">
<li>Login</li>
<li>Register</li>
</ul>
<p class="mobile-nav">🌚</p>
</nav>
<main>
<section id="text-side">
<h1>Make <br />remote work</h1>
<p>
Get your team in sync, no matter your location. Streamline processes,
create team rituals, and watch productivity soar.
</p>
<button>Learn more</button>
<div class="clients-logos">
<img src="https://i.postimg.cc/gJ9Y84m6/client-databiz.png" />
<img src="https://i.postimg.cc/15DDqYSD/client-audiophile.png" />
<img src="https://i.postimg.cc/5ybQqfbv/client-meet.png" />
<img src="https://i.postimg.cc/g2NsxByN/client-maker.png" />
</div>
</section>
<section id="img-side">
<img
class="desktop-img"
src="https://i.postimg.cc/0Nt97Bhf/image-hero-desktop.png"
/>
<img
class="mobile-img"
src="https://i.postimg.cc/ZnYfhwwW/image-hero-mobile.png"
/>
</section>
</main>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="https://codehemaa.com">Ophy Boamah</a>.
</div>
</body>
</html>