CSS-də Grid ilə Plitəcələr
Gəlin grid sisteminin praktiki işinə keçək və müxtəlif boşluqlarla plitəcələr yaradaq.
9 blokdan ibarət, sırada 3, boşluqsuz plitəcə
Gəlin doqquz elementdən ibarət bir cədvəl yaradaq və onları üç sütuna yerləşdirək:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
height: 100px;
padding: 10px;
border: 1px solid #696989;
}
:
9 blokdan ibarət, sırada 3, boşluqlu plitəcə
İndi elementlər arasında boşluq yaratmaq üçün
grid-gap xassəsini tətbiq edək:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
height: 100px;
padding: 10px;
border: 1px solid #696989;
}
:
9 blokdan ibarət, sırada 3, yalnız bloklar arası boşluqlu plitəcə
İndi gəlin griddə yalnız bloklar arasında məsafə təyin edək:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
border: 2px solid #696989;
width: 600px;
}
#parent > div {
height: 100px;
padding: 10px;
border: 1px solid #696989;
}
:
8 blokdan ibarət, sırada 3, çatışmayan bloklu plitəcə
Gəlin aşağı sırada bir blokun çatışmadığı bir plitəcə edək:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
border: 2px solid #696989;
width: 600px;
}
#parent > div {
height: 100px;
padding: 10px;
border: 1px solid #696989;
}
:
Praktiki tapşırıqlar
Aşağıdakı nümunəni həyata keçirin:
Aşağıdakı nümunəni həyata keçirin:
Aşağıdakı nümunəni həyata keçirin: