カスタムページでグリッドレイアウトを使用する
適切に使用する場合は、次のページのレイアウトを見たことがあるかもしれません。
いくつかの企業の公式サイト、ブログ、ニュースポータル、管理バックグラウンドなどのサイトでは、これらの情報展示レイアウトが至る所で見られ、一定のフロントエンド開発経験があれば、使うかもしれないフレックス上記のレイアウトを簡単に実現するために、この例ではどのように使うかを学びますGrid上記のレイアウトを実現します。
前提条件
このチュートリアルでは、基本的な機能の一部を使用する必要があります。まず、次の機能を理解することができます。
このチュートリアルでは、web開発技術を使用しています。まず、次の技術を理解することができます。
効果を実現する
ノートパソコンの画面サイズ。
タブレットの画面サイズ。
モバイル端末の画面サイズ。
実装手順
カスタムページの作成
完全な構成ソースコード:
{"type":"nodeSchema","componentsMap":{},"componentsTree":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lywrejlf","behavior":"NORMAL","__style__":":root {\n display: grid;\n gap: 16px;\n grid-template-columns: repeat(4, minmax(0px, 1fr));\n}\n\n@media screen and (max-width: 1024px){\n :root {\n grid-template-columns: repeat(3, minmax(0px, 1fr));\n }\n}\n\n@media screen and (max-width: 768px){\n :root {\n grid-template-columns: repeat(2, minmax(0px, 1fr));\n }\n}\n\n@media screen and (max-width: 480px){\n :root {\n grid-template-columns: repeat(1, minmax(0px, 1fr));\n }\n}","fieldId":"div_lywr83ja","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":[null,null],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lywrejle","behavior":"NORMAL","__style__":":root {\n border-radius: 6px;\n background-color: #fff;\n cursor: pointer;\n}\n\n:root:hover {\n box-shadow: rgba(31, 56, 88, 0.2) 1px 1px 4px 0px;\n}\n","fieldId":"div_lywr83jb","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loop":[1,2,3,4,5,6,7,8,9,10,11,12,13],"loopArgs":[null,null],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Image","props":{"preview":false,"autoHeight":false,"src":"https://tianshu-vpc.oss-cn-shanghai.aliyuncs.com/95c4208a-39a2-42cc-9470-ca1fedf3ac77.jpg?x-oss-process=image/resize,m_fixed,h_380,w_680","alt":"Image 404","className":"image_lywrejla","fit":"cover","round":"自定义","width":"","autoWidth":false,"roundRadius":"","__style__":":root {\n display: block;\n width: 100%;\n border-radius: 6px 6px 0 0;\n}\n","height":120,"fieldId":"image_lywr83jc","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":[null,null],"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lywrejld","behavior":"NORMAL","__style__":":root {\n padding: 16px;\n}\n","fieldId":"div_lywr83jd","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Text","props":{"maxLine":1,"showTitle":false,"contentPaddingMobile":"0","className":"text_lywrejlb","title":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"behavior":"NORMAL","content":{"en_US":"Tips content","use":"zh_CN","zh_CN":"栅格布局","type":"i18n"},"__style__":":root {\n font-size: 16px;\n color: #171A1D;\n line-height: 24px;\n}\n","fieldId":"text_lywr83je","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Text","props":{"maxLine":"","showTitle":false,"contentPaddingMobile":"0","className":"text_lywrejlc","title":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"behavior":"NORMAL","content":{"en_US":"Tips content","use":"zh_CN","zh_CN":"Grid 栅格布局的实现，可以支持 PC 端、Mobile 端做卡片列表展示。","type":"i18n"},"__style__":":root {\n font-size: 12px;\n color: #A2A3A5;\n line-height: 18px;\n margin-top: 4px;\n height: 36px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n -webkit-line-clamp: 2;\n}\n","fieldId":"text_lywr83jf","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]}]}]}]}
ページスタイルの設定
アウトラインツリーから親コンテナを見つけます。
次のスタイルを設定します。
:root {
display: grid;
gap: 16px;
grid-template-columns: repeat(4, minmax(0px, 1fr));
}
@media screen and (max-width: 1024px){
:root {
grid-template-columns: repeat(3, minmax(0px, 1fr));
}
}
@media screen and (max-width: 768px){
:root {
grid-template-columns: repeat(2, minmax(0px, 1fr));
}
}
@media screen and (max-width: 480px){
:root {
grid-template-columns: repeat(1, minmax(0px, 1fr));
}
}
スタイルコード解析:
ディスプレイ: グリッドコンテナレイアウトをgridに設定しますGap: 16pxコンテナ内のサブコンテナの間隔を16pxに設定しますGrid-template-columns: repeat(4, minmax(0px, 1fr))コンテナ内のサブコンテナが1つのグリッドを占め、1行4つのサブコンテナを設定します@ Medialscreenand (max-width: 1024px)画面幅が1024px未満の場合のスタイル@ Medialscreenand (max-width: 768px)画面幅が768px未満の場合のスタイル@ Medialscreenand (max-width: 480px)画面幅が480px未満の場合のスタイル
保存ページ
オンラインで試遊する
このドキュメントは役に立ちましたか？