طرح بندی – چالش های CSS – انجمن DEV

Summarize this content to 400 words in Persian Lang
می توانید تمام کدها را در این پست در repo Github پیدا کنید.

شما می توانید تصویری را در اینجا بررسی کنید:

طرح بندی رایج از طریق CSS

طرح ناوبری ثابت

lang=”en”>

charset=”UTF-8″ />
name=”viewport” content=”width=device-width, initial-scale=1.0″ />
http-equiv=”X-UA-Compatible” content=”ie=edge” />
Fixed Navigation
rel=”stylesheet” href=”styles.css” />

This is a navbar
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

nav {
position: fixed;
top: 0;
z-index: 1000;
width: 100%;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

طرح دو ستونی

lang=”en”>

charset=”UTF-8″ />
name=”viewport” content=”width=device-width, initial-scale=1.0″ />
http-equiv=”X-UA-Compatible” content=”ie=edge” />
Two Columns Layout
rel=”stylesheet” href=”styles.css” />

class=”table-container”>
class=”left”>
Left Side

class=”right”>
Right Side

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

.float-container .left {
width: 200px;
float: left;
background-color: tomato;
}

.float-container .right {
margin-left: 200px;
background-color: aqua;
}

.absolute-container {
position: relative;
}

.absolute-container .left {
width: 200px;
position: absolute;
top: 0;
left: 0;
background-color: tomato;
}

.absolute-container .right {
margin-left: 200px;
background-color: aqua;
}

.bfc-container .left {
width: 200px;
float: left;
background-color: tomato;
}

.bfc-container .right {
overflow: hidden;
background-color: aqua;
}

.flex-container {
display: flex;
}

.flex-container .left {
width: 200px;
background-color: tomato;
}

.flex-container .right {
flex: 1;
background-color: aqua;
}

.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
}

.grid-container .left {
background-color: tomato;
}

.grid-container .right {
background-color: aqua;
}

.table-container {
display: table;
}

.table-container .left {
display: table-cell;
background-color: tomato;
}

.table-container .right {
display: table-cell;
background-color: aqua;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

طرح سه ستونی

lang=”en”>

charset=”UTF-8″ />
name=”viewport” content=”width=device-width, initial-scale=1.0″ />
http-equiv=”X-UA-Compatible” content=”ie=edge” />
Three Columns Layout
rel=”stylesheet” href=”styles.css” />

class=”flex-container”>
class=”left”>Left
class=”middle”>Middle
class=”right”>Right

class=”grid-container”>
class=”left”>Left
class=”middle”>Middle
class=”right”>Right

class=”absolute-container”>
class=”left”>Left
class=”middle”>Middle
class=”right”>Right

class=”float-container”>
class=”left”>Left
class=”middle”>Middle
class=”right”>Right

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

.flex-container {
display: flex;
}

.flex-container .left {
width: 200px;
background-color: tomato;
}

.flex-container .middle {
flex: 1;
background-color: blanchedalmond;
}

.flex-container .right {
width: 200px;
background-color: aqua;
}

.grid-container {
display: grid;
grid-template-columns: 200px 1fr 200px;
}

.grid-container .left {
background-color: tomato;
}

.grid-container .middle {
background-color: blanchedalmond;
}

.grid-container .right {
background-color: aqua;
}

.absolute-container {
position: relative;
}

.absolute-container .left,
.absolute-container .right {
position: absolute;
width: 200px;
top: 0;
}

.absolute-container .left {
left: 0;
background-color: tomato;
}

.absolute-container .right {
right: 0;
background-color: aqua;
}

.absolute-container .middle {
margin-left: 200px;
margin-right: 200px;
background-color: blanchedalmond;
}

.float-container .left {
width: 200px;
float: left;
background-color: tomato;
}

.float-container .right {
width: 200px;
float: right;
background-color: aqua;
}

.float-container .middle {
margin-left: 200px;
margin-right: 200px;
background-color: blanchedalmond;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جام مقدس

lang=”en”>

charset=”UTF-8″ />
name=”viewport” content=”width=device-width, initial-scale=1.0″ />
http-equiv=”X-UA-Compatible” content=”ie=edge” />
Holy Grail
rel=”stylesheet” href=”styles.css” />

Header
class=”columns”>
Navigation
Main
Sidebar

Footer

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

body {
min-height: 100vh;
}

#root {
display: flex;
flex-direction: column;
min-height: 100vh;
}

header,
nav,
main,
aside,
footer {
text-align: center;
padding: 12px;
}

header {
height: 60px;
background-color: tomato;
}

.columns {
display: flex;
flex-grow: 1;
}

nav {
flex-shrink: 0;
width: 100px;
background-color: coral;
}

main {
flex-grow: 1;
background-color: moccasin;
}

aside {
flex-shrink: 0;
width: 100px;
background-color: sandybrown;
}

footer {
height: 100px;
background-color: slategray;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرجع

 lang="en">
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
     http-equiv="X-UA-Compatible" content="ie=edge" />