SevicheCC/Urara-Blog
1
0
Fork 0
mirror of https://github.com/Sevichecc/Urara-Blog.git synced 2025-05-01 08:09:29 +08:00
Code Issues Projects Releases Packages Wiki Activity
Urara-Blog/build/_app/immutable/pages/grid.md-d52a8f72 2.js
Sevichecc f1246f7073 add pgp
2022-08-14 01:14:53 +08:00

1 line
8.3 KiB
JavaScript
Raw Blame History

import{S as U,i as Y,s as ss,C as M,w as ls,x as as,y as os,z as ns,A as R,f as ts,t as es,B as ps,X as V,l as c,r as B,a as g,V as W,e as X,m as i,n as y,u as A,h as o,c as C,W as J,p as L,b as p,G as F,E as Fs}from"../chunks/index-cd58b8d1.js";import{P as rs}from"../chunks/post_layout-9085e57e.js";import"../chunks/posts-c52cb603.js";import"../chunks/title-765c989f.js";import"../chunks/index-81c83cec.js";import"../chunks/post_card-e7f4525a.js";import"../chunks/posts-57ab4794.js";import"../chunks/icon-3aa13b39.js";import"../chunks/head-4a058b17.js";import"../chunks/footer-1abd9501.js";function cs(m){let l,t,r,D,a,e,d,f,b,$,v,u,k,H,h,N=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">grid</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">display</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> grid</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">gap</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1.2rem</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">grid--2--cols</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">grid-template-columns</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">repeat</span><span style="color: #89DDFF">(</span><span style="color: #F78C6C">2</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1fr</span><span style="color: #89DDFF">);</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">grid--3--cols</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #B2CCD6">grid-template-columns</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">repeat</span><span style="color: #89DDFF">(</span><span style="color: #F78C6C">3</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1fr</span><span style="color: #89DDFF">);</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,x,E,_,G,w,S,Q=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">section</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">grid grid--2--cols</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">Text1</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">Text2</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">section</span><span style="color: #89DDFF">&gt;</span></div><div class='line'></div><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">section</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">grid grid--3--cols</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">Text1</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">Text2</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">Text3</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">section</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,T;return{c(){l=c("ol"),t=c("li"),r=B("\u5148\u8BBE\u7F6E\u4E00\u4E2A class \u4E3A grid\uFF0C\u5E76\u8BBE\u5B9A gap"),D=g(),a=c("li"),e=B("\u5B50\u5143\u7D20\u4E2D\u518D\u8BBE\u7F6E\u5177\u4F53\u7684\u5217\u6570"),d=g(),f=c("p"),b=B("\u5982\u8BBE\u4E00\u4E2A\u4E0A\u4E3A 2 \u5217\u548C\u4E0B\u4E3A 3 \u5217\u7684\u6805\u683C\u5E03\u5C40\uFF1A"),$=g(),v=c("h4"),u=c("a"),k=B("CSS:"),H=g(),h=new W(!1),x=g(),E=c("h4"),_=c("a"),G=B("HTML:"),w=g(),S=new W(!1),T=X(),this.h()},l(s){l=i(s,"OL",{});var n=y(l);t=i(n,"LI",{});var P=y(t);r=A(P,"\u5148\u8BBE\u7F6E\u4E00\u4E2A class \u4E3A grid\uFF0C\u5E76\u8BBE\u5B9A gap"),P.forEach(o),D=C(n),a=i(n,"LI",{});var Z=y(a);e=A(Z,"\u5B50\u5143\u7D20\u4E2D\u518D\u8BBE\u7F6E\u5177\u4F53\u7684\u5217\u6570"),Z.forEach(o),n.forEach(o),d=C(s),f=i(s,"P",{});var I=y(f);b=A(I,"\u5982\u8BBE\u4E00\u4E2A\u4E0A\u4E3A 2 \u5217\u548C\u4E0B\u4E3A 3 \u5217\u7684\u6805\u683C\u5E03\u5C40\uFF1A"),I.forEach(o),$=C(s),v=i(s,"H4",{id:!0});var j=y(v);u=i(j,"A",{href:!0});var q=y(u);k=A(q,"CSS:"),q.forEach(o),j.forEach(o),H=C(s),h=J(s,!1),x=C(s),E=i(s,"H4",{id:!0});var z=y(E);_=i(z,"A",{href:!0});var O=y(_);G=A(O,"HTML:"),O.forEach(o),z.forEach(o),w=C(s),S=J(s,!1),T=X(),this.h()},h(){L(u,"href","#css"),L(v,"id","css"),h.a=x,L(_,"href","#html"),L(E,"id","html"),S.a=T},m(s,n){p(s,l,n),F(l,t),F(t,r),F(l,D),F(l,a),F(a,e),p(s,d,n),p(s,f,n),F(f,b),p(s,$,n),p(s,v,n),F(v,u),F(u,k),p(s,H,n),h.m(N,s,n),p(s,x,n),p(s,E,n),F(E,_),F(_,G),p(s,w,n),S.m(Q,s,n),p(s,T,n)},p:Fs,d(s){s&&o(l),s&&o(d),s&&o(f),s&&o($),s&&o(v),s&&o(H),s&&h.d(),s&&o(x),s&&o(E),s&&o(w),s&&o(T),s&&S.d()}}}function is(m){let l,t;const r=[m[0],K];let D={$$slots:{default:[cs]},$$scope:{ctx:m}};for(let a=0;a<r.length;a+=1)D=M(D,r[a]);return l=new rs({props:D}),{c(){ls(l.$$.fragment)},l(a){as(l.$$.fragment,a)},m(a,e){os(l,a,e),t=!0},p(a,[e]){const d=e&1?ns(r,[e&1&&R(a[0]),e&0&&R(K)]):{};e&2&&(d.$$scope={dirty:e,ctx:a}),l.$set(d)},i(a){t||(ts(l.$$.fragment,a),t=!0)},o(a){es(l.$$.fragment,a),t=!1},d(a){ps(l,a)}}}const K={title:"CSS \xB7 Reusable Grid",slug:"/grid.md",tags:["CSS"],created:"2022-01-13T10:01:44.000Z",summary:"\u53EF\u590D\u7528\u7684CSS Grid\u8BBE\u7F6E",lastmod:"2022-05-07T05:32:52.372Z",path:"/grid",toc:[{depth:4,title:"CSS:",slug:"css"},{depth:4,title:"HTML:",slug:"html"}],updated:"2022-08-06T10:49:51.803Z"};function ys(m,l,t){return m.$$set=r=>{t(0,l=M(M({},l),V(r)))},l=V(l),[l]}class hs extends U{constructor(l){super(),Y(this,l,ys,is,ss,{})}}export{hs as default,K as metadata};
Reference in a new issue View git blame Copy permalink