Technology sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS euismod eget layout consequat

I. Overview

Eget layout (euis) est potissima solutio CSS layout.

Paginas interretiales in grides dividit, et diversae gridi ad libitum componi possunt varias rationes creare. In praeterito, effectus qui solum per complexus compages CSS effici potuerunt, nunc in navigatores aedificantur.

Propositum assumptum sicut supra pictum est proprium at arcu euismod.

In arcu eget layout quasdam similitudines cum flexo layout habet, utrumque positionem plurium elementorum intra continentis definire potest. Sed magnae sunt differentiae.

Propositio flexa est layout axioma, solum situm "item" contra axem, qui spectari potestUna dumtaxat layout . Eget layout dividet receptaculum in "ordes" et "columnas", cellulas generat, et tunc designat cellam ubi "item sita est", quae videri potest.2D layout . Eget at arcu flex at arcu longe potenti.

2. notiones fundamentales

Priusquam addiscendum eget layout, notiones nonnullas praecipuas intelligere debes.

2.1 Continentes et incepta

Area cum layout de euismod appellatur "continens". Pueri elementa quae in craticula utuntur intra continens positione vocantur "items".

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>
1
2
3
4
5

In codice superiori, ext<div>Elementum est continens et tria interiora<div>Elementa sunt items.

NoticeExertum non potest esse nisi elementum pueri summae tabulae continentis, nec includit pueri elementa rei, sicut in codice superiore.<p> Elementum non aliquet. Sed at arcu eget nisi efficitur suscipit.

2.2 ordines et columnae

Area horizontalis intra continens "rov" dicitur, et area verticalis "columna" dicitur.

In pictura supra, areae horizontales obscurae sunt "versus" et verticales areae obscurae sunt "columnae".

2.3 Cellulae

Area intersectio ordinum et columnarum appellatur "cella".

In communibus adiunctis,nOK acmcolumnas facietn x m cellas. Exempli gratia: 3 ordines et 3 columnae 9 cellulas facient.

2.4 euismod lineae

Lineae quae craticulam dividunt vocantur lineae malesuada. Eget lineae horizontalis ordines dividunt, et lineae euismod verticales columnas dividunt.

In communibus adiunctis,nOKn + 1radix eget lineae horizontalis;mRecensenturm + 1Tres lineae verticales sunt, exempli gratia, quattuor lineae horizontales in tribus ordinibus.

Pictura supra scripta est 4 x 4 eget cum 5 lineis eget horizontalibus ac 5 lineis verticalibus.

3. Continens possessiones

Proprietates Grid layouts in duo genera dividuntur. Alter genus definitur in continente, et dicitur continens proprietates; alterum genus definitur exertus et proprietas project. Haec pars prima introducit continens proprietates.

3.1 ostentationem attributi

display: gridVas notificat uti layout de euismod.

div {
  display: grid;
}
1
2
3

Imago est supradisplay: gridof*Effectus。

Defalta elementa continens elementa angusta sunt, sed etiam ad elementa inlinea ponenda sunt.

div {
  display: inline-grid;
}
1
2
3

In codice supra cificatdivInline est at arcu malesuada euismod elementum eget ipsum.

Imago est supradisplay: inline-gridof*Effectus。

Nota quod, postquam in layout desiderii obitus est, continens sub-elementa (item)float、display: inline-block、display: table-cell、vertical-alignetcolumn-*Omnes aliae occasus irritae erunt.

3.2 eget columns attributum, eget-templates attributum

Continens post extensionem eget speciem, tunc ordines et columnas dividere debet.grid-template-columnsProprietates columnae cujusque columnae latitudinem definiunt;grid-template-rowsProprietas cuiusque ordinis altitudo definit versuum.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5

super codiceEget speciem cum tribus ordinibus et tribus columnis100px。

Loco utendi unitatibus absolutis, percentages quoque uti potes.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
1
2
3
4
5

1） repetere ()

Interdum valde molestum est saepe idem valere scribere, praesertim cum multae grides.Hoc tempore, uti potesrepeat() Munus quod valores iteratos simplificat.Quod supra codice ususrepeat()Rescriptum sic.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
1
2
3
4
5

repeat()Duos parametros accipit, primus parameter est numerus repetitionum (3 in exemplo superiore), et secundus parameter valor repetendus est.

repeat()Bene est ad exemplum repetere.

grid-template-columns: repeat(2, 100px 20px 80px);
1

super codice6 columnae definiuntur, latitudo primae et quartae columnae est100pxcolumnae secundae et quintae20pxcolumna tertia et columna sexta80px。

(II) auto- satiata keyword

Interdum magnitudo cellae fixa est, sed magnitudo continentis indeterminata est.Si vis singulas ordines (vel columnas) ad cellulas quam plurimas accommodare, uti potesauto-fillKeywords autocomplete represent.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
1
2
3
4

super codiceRepraesentat latitudinem uniuscuiusque columnae100pxet tunc facto implet, donec continens columnas non amplius continere potest.

Seorsumauto-fillac keyword "auto-fit utriusque enim mores idem fere est.Solum quando continens satis latum est ad omnes cellulas in uno ordine accommodandas, et latitudo cellularum non figiturdifferentias morum：auto-fillReliquae latitudo cellulis inanibus implebitur.auto-fitconabor ampliare cellae latitudinem.

(3) fr keyword

Ut relationes proportionales commode exprimant, eget layout praebetfr Keyword (brevis pro fractione, id est "fragmentum").Si latitudines duarum columnarum sunt1fret2frquod significat hoc, bis illud.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
1
2
3
4

super codiceDuas columnas eiusdem latitudinis repraesentat.

frAdhiberi potest cum unitatibus absolutis, quod est commodum.

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
1
2
3
4

super codicesignificat quod prima columna lata est 150 elementa, et secunda columna est media latitudo ad columnam tertiam.

（4）minmax()

minmax() Munus longitudinis spatium efficit, significans longitudinem intra hunc ambitum esse. Duos parametros accipit, minimi pretii et maximi pretii.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

In codice supradicto ;minmax(100px, 1fr)Columnam latitudinem non minorem indicat100px, non major1fr。

(5) auto keyword

autoKeyword repraesentatio longitudo ab ipso navigatro determinatur.

grid-template-columns: 100px auto 100px;
1

In codice praedicto, latitudo columnae secundae plerumque aequalis est maximam latitudinem cellae in columna, nisi cellula contenta posita sit.min-widthqui valor maior est quam maxima latitudo.

(VI) nomine eget lineae

grid-template-columnsattributa et *grid-template-rowsIn proprietatibus, uti potes uncis quadratis, ut nomen cuiusque lineae electronicae denotare facile in futuro referat.

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1
2
3
4
5

Supra signum eget layout de 3 versuum x 3 columnarum designat, ergo sunt 4 lineae perpendicularis et 4 lineae euismod horizontales. Intus uncis quadratis sunt nomina octo versuum.

Eget layout multa nomina admittit eandem lineam, ut[fifth-line row-5]。

(7) Layout example

grid-template-columns Proprietates valde utiles sunt pro pagina at arcu. In arcu columna duo tantum unam lineam codicis requirit.

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
1
2
3
4

Supra codicem ponit columnam sinistram usque ad 70% et columnam dextra ad 30%.

Traditum duodecim-eget arcus facile etiam ad scribendum.

grid-template-columns: repeat(12, 1fr);
1

3.3 grid-row-gap attributum, grid-column-gap attributum, grid-gap-tributum

grid-row-gapProprietas spatium inter ordines constituit (line spacing);grid-column-gapProprietas ponit spatium inter columnas (columna spacing).

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
1
2
3
4

super codicemedium,grid-row-gapPonebat lineam iustae;grid-column-gapSolebant columnae spatio ponendae.

grid-gapProprietates aregrid-column-gapetgrid-row-gapComposita abbreviationis forma , syntaxis talis est.

grid-gap: <grid-row-gap> <grid-column-gap>;
1

Ideo praedicta pars codicis CSS aequipollet sequenti codice.

.container {
  grid-gap: 20px 20px;
}
1
2
3

sigrid-gapSecundum valorem omittitur et secundum valorem aequalem priori valore considerat.

Secundum signa novissima, tria nomina attribuunt supragrid-praepositione eiecto;grid-column-gapetgrid-row-gapscriptum ascolumn-gapetrow-gap，grid-gapscriptum asgap。

3.4 eget-templates areis proprietas

In arcu malesuada euismod permittit ut "areas" denotaas, quae ex cellulis singulis vel pluribus componuntur.grid-template-areasProprietates areis definire solebant.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    'a b c'
    'd e f'
    'g h i';
}
1
2
3
4
5
6
7
8
9

Codex superior primus 9 cellulas dividit et eas nominatavenireiNovem areae respondent his novem cellulis respective.

Modus scripturae plures cellulas in unam aream mergendi talis est.

grid-template-areas:
  'a a a'
  'b b b'
  'c c c';
1
2
3
4

Quod supra codicem cellulae IX dividit ina、b、careis tribus.

Infra exemplum est at arcu.

grid-template-areas:
  'header header header'
  'main main sidebar'
  'footer footer footer';
1
2
3
4

In codice superiore, summitas est area capitisheaderImo est area footerfootermedia pars estmainetsidebar。

Si aliquibus locis uti non indigent, "punctis" utere (.)exprimere.

grid-template-areas:
  'a . c'
  'd . f'
  'g . i';
1
2
3
4

In codice praedicto, media columna est punctus, quod significat cellam non adhiberi, nec cellam alicujus areae non convenire.

Nota quod nominatio regionum lineis eget.Initium eget linea cuiusque regionis automatice nominatur区域名-start, linea eget terminata ipso nomine区域名-end。

Exempli gratia, area nominaturheader, dein lineae eliquae horizontales et lineae verticales ad positionemheader-start, eget lineae horizontales et lineae verticales in positione desinentia vocanturheader-end。

3.5 malesuada euismod-auto-fluxus attributi

Postquam craticula divisum est, puer elementa continentis in quolibet eget ordine automatice collocabuntur. Defectus collocationis ordo est "ordo prima, columna secunda", id est, imple primum ordinem primum, et tunc incipit ponere secundum ordinem, qui est ordo numerorum in figura infra.

Hic ordo agrid-auto-flowDeterminata per attributum valorem default estrow id est "primo versu, deinde versu".Etiam posuere utcolumnfit "primum agmen, deinde ordo".

grid-auto-flow: column;
1

super codiceiam setupcolumnPosthac collocatio ordinis fiet ut infra patebit.

grid-auto-flowPraeter occasum attributumrowetcolumnPotest etiam adrow denseetcolumn dense . Haec duo bona principaliter adhibentur ut reliquas res statim ponere post aliquas res positiones assignentur.

Exemplum infraProiciamus N. 1 et N. 2 duas cellulas occupare, ac deinde in defectugrid-auto-flow: rowHoc in casu, sequentia extensionis proferentur.

In tabula supra, positio post item N. 1 vacua est. Hoc est, quia item No. 3 sequitur, item N. 2 per defaltam, ita post item N. 2 ponendus est.

Nunc mitigare occasus et pone illudrow denseinterpretatur ordo primus, columna secunda, eamque quam arctissime nullis spatiis imple.

grid-auto-flow: row dense;
1

super codiceEffectus talis est.

Imago superne complebit primo versu primo, deinde secundo, sic item 3 sequetur item 1 . Item N. 8 et No. 9 in quarto ordine collocabuntur.

Si mutare occasum tocolumn densesignificat columnam primam, deinde biremem, et spatiis quam maxime imple.

grid-auto-flow: column dense;
1

super codiceEffectus talis est.

Superius imago implebit primam columnam primam, et per secundam columnam, sic item N. 3 est in columna prima, et item N. 4 est in columna secunda. item T. 8 et 9 in columna quarta expressi.

3.6 justify, item attributum, align-items attributum, locus-items attributum

justify-itemsProprietas contentorum cellulae (sinistrum, centrum, dextrum) ponit situm horizontalem.align-itemsProprietas ponit situm verticalem (top, medium, fundum) cellae contenti.

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
1
2
3
4

Haec duo attributa prorsus eadem scripta sunt ac sequentes valores capere possunt.

• satus: align incipiens cellae ore.
• fine: Conlinere ad extremum marginem cellae.
• centrum: Centrum intra cellam.
• stretch: stretch to fill the entire width of cell (default value).

.container {
  justify-items: start;
}
1
2
3

super codiceContentum cellae sinistrae aligned indicat, et effectus ut infra patebit.

.container {
  align-items: start;
}
1
2
3

super codiceContentum cellae indicat caput varius, et effectus ut infra patebit.

place-itemsProprietates arealign-itemsattributa et *justify-itemsForma compositionis notas proprietatis.

place-items: <align-items> <justify-items>;
1

Infra exemplum.

place-items: start end;
1

Si secundo valore omittitur, navigatrum aequalem primo valore aestimat.

3.7 justify-content attributum, align-content attributum, place-content attributum

justify-contentAttributum est situs situs horizontalis totius areae continentis intra (sinistram, centrum, dextram);align-contentAttributum est situm verticalem totius areae contentorum (summum, medium, fundum).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
1
2
3
4

Haec duo attributa prorsus eadem scripta sunt ac sequentes valores capere possunt. (In imaginibus infra omnes secundumjustify-contentExempli gratia, possessionesalign-content Schema attributum prorsus simile est, nisi quod orientatio horizontalis ad orientationem verticalem mutatur. )

• satus - principium terminus continens varius.
  
• terminus - adsimilat terminus continens finem.
  
• centrum - centrum continens intus.
  
• Extendam - Cum item magnitudo non specificatur, extende ad occupandum totum eget continens.
  
• space-circum--aequale spatium utrinque singulis item. Spatium ergo inter res duplo majus est quam spatium inter res et terminus continens.
  
• intermedium - Est aequalis spatii inter res et nullum spatium inter res et confinium continens.
  
• Spatium aequaliter — Spatium rerum inter res aequalis est, et spatium inter items et terminum continentis eadem longitudo est.
  
  place-contentProprietates arealign-contentattributa et *justify-contentForma compositionis notas proprietatis.

place-content: <align-content> <justify-content>;
1

Infra exemplum.

place-content: space-around space-evenly;
1

Si secundum valorem omittis, navigatrum ponit secundum valorem aequalem primo valore.

3.8 grid-auto-columns property, grid-auto-rows

Interdum, nonnullae positiones extra euismod exsistentes assignantur. Exempli gratia, euismod tantum 3 columnas habet, sed certa item in 5th ordine specificatur. Hoc tempore, navigatrum sponte extra grids generabit ad collocationem rerum faciliorem.

grid-auto-columnsattributa et *grid-auto-rows Proprietates ponuntur columnae latitudinis et ordinis altitudinis redundantis egetis ab ipso creatae navigatoris.Scribuntur eodem modogrid-template-columnsetgrid-template-rows Prorsus idem. Si hae duae possessiones non specificatae sunt, navigatrum determinat columnam latitudinem et ordinem altitudinis novae egetis omnino secundum magnitudinem contenti cella.

Exemplum infraIntus eget divisa est 3 ordines x 3 columnarum, sed item No. 8 in versu 4th specificatur et item No. 9 in versu 5th specificatur.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6

Praecedens signum significat novum ordinem altitudinis aequabiliter 50px (primo versui altitudo 100px).

3.9 eget-template attributum, malesuada euismod attributum

grid-templateProprietates aregrid-template-columns、grid-template-rowsetgrid-template-areasComposita notas forma harum trium proprietatum.

gridProprietates aregrid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flowComposita abbreviatio harum sex proprietatum.

In prospectu facilioris legendi et scribendi, suadetur ut attributa confundantur, ideo haec duo attributa singillatim hic non introducentur.

4. Project attributa

Proprietates sequentia definiuntur in documento.

4.1 malesuada euismod, eget tincidunt quam, eget tincidunt ante

Situs consilii specificari potest.

• grid-column-startProprietates: Vertical eget lineae ubi terminus sinistrus sita est
• grid-column-endProprietas: linea euismod verticalis ubi terminus dexter sita est
• grid-row-startPossessiones: eget linea horizontalis ubi terminus superior sita est
• grid-row-endPossessiones: eget linea horizontalis ubi terminus inferior sita est

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
1
2
3
4

super codiceTerminus sinistrus item 1 significat lineam perpendiculi secundi, et terminus dexter est quarta linea eget verticalis.

In pictura supra, solum sinistrae et dextrae fines item N. 1 specificantur, et fines superiores et inferiores non specificantur, sic positio defectus adhibebitur, id est terminus superior prima linea eget horizontalis; Inferior vero terminus est linea eget horizontalis secunda.

Exceptis item N. 1, alias res nullas habent certas positiones et ab ipso navigatro positae sunt. Hoc tempore, positiones eorum a continentis determinanturgrid-auto-flowDeterminatum per attributum valorem default huius attributi estrow ita ordinabuntur "primum ordinem, deinde agmen".Lectores possunt immutare valorem huius attributicolumn、row denseetcolumn densead videndum quomodo positiones aliarum rerum mutatae sint.

Exemplum infraEffectus est specificandi positiones quatuor terminorum.

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
1
2
3
4
5
6

Valores horum quattuor attributorum, praeterquam ut numerus lineae craticulae specificatus, etiam specificari potest ut nomen lineae gridis.

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
1
2
3
4

In superiori codice, positiones limitum dextrae ac dextrae, nomina linearum eget certae sunt.

Valores horum quattuor attributorum etiam adhiberi possuntspanKeyword, significans "spatio", id est quot grids inter fines sinistros et dextros (finis summi et imi).

.item-1 {
  grid-column-start: span 2;
}
1
2
3

super codiceIndicat terminum sinistrum item No. 1 palmorum 2 gridum a termino dextro.

Hoc refertur adcodice infraEffectus prorsus idem est.

.item-1 {
  grid-column-end: span 2;
}
1
2
3

His quattuor attributis utendo, si est aliudque rerum, uterez-indexProprietas speciem imbricatis ordo rerum.

4.2 grid-column attributum, grid-row attributum

grid-columnProprietates aregrid-column-startetgrid-column-endComposita abbreviatio formagrid-rowProprietates aregrid-row-startattributa et *grid-row-endForma abbreviata merger.

.item {
  grid-column: <start-line/ <end-line>;
  grid-row: <start-line/ <end-line>;
}
1
2
3
4

Infra exemplum.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11

In codice supra, exertusitem-1Primi ordinis, a prima columna ad tertiam columnam lineam.

Inter haec duo attributa etiam uti potesspanKeywords significans quot grids ad spatium.

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
1
2
3
4
5
6
7
8
9
10
11

super codicein, projectitem-1Area occupata in primo ordine + secundo, et in columna prima + in columna secunda.

Exacuere et partes sequentes omitti possunt et per defaltam emissionem exigunt.

.item-1 {
  grid-column: 1;
  grid-row: 1;
}
1
2
3
4

In codice supra, exertusitem-1Primam eget in angulo sinistro superiorem.

4.3 eget-area attributum

grid-areaProprium determinat locum in quo item ponitur.

.item-1 {
  grid-area: e;
}
1
2
3

super codiceIn , Project Noeregio, effectus ut infra patebit.

grid-areaPossessiones quoque adhiberi utgrid-row-start、grid-column-start、grid-row-end、grid-column-endForma abbreviationis inducitur directe datorum rei situm.

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
1
2
3

Infra aexemplum。

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}
1
2
3

4

justify-selfProprietas contentorum cellularum (sinistra, centrum, dextrum) ponit situmjustify-itemsEaedem proprietates sunt omnino, sed solum ad unam item.

align-selfProprietas ponit situm verticalem (top, medium, fundum) cellae contenti, sequituralign-itemsUsus attributorum idem prorsus est, et rem unam tantum attingit.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
1
2
3
4

Utraque proprietas sequentes quattuor valores accipere possunt.

• satus: align incipiens cellae ore.
• fine: Conlinere ad extremum marginem cellae.
• centrum: Centrum intra cellam.
• stretch: stretch to fill the entire width of cell (default value).

Infrajustify-self: startexemplum.

.item-1 {
  justify-self: start;
}
1
2
3

place-selfProprietates arealign-selfattributa et *justify-selfForma compositionis notas proprietatis.

place-self: <align-self> <justify-self>;
1

Infra exemplum.

place-self: center center;
1

Si secundo valore omittitur;place-selfProprietas autem considerabit duos valores esse aequales.